0

1ページに2つのグライダースライドショーがあります。スライダー＃1（#slider）は、スライダー＃1のアクティブなスライドではなく、スライダー＃2（＃slider2）でアクティブなタブを表示します。正しいスライダーのクラスを「アクティブ」に変更するためのリンクが必要です。

これが起こっているところです：

this.current = $(element);

$$('#slider div.controls a.active').invoke('removeClassName', 'active');
$$('#slider2 div.controls a.active').invoke('removeClassName', 'active');
$$('#slider a[href="#'+this.current.id+'"]').invoke('addClassName', 'active');

これが私のHTMLコードです：

<a href="#section1">1</a>
<a href="#section2">2</a>
<a href="#section3">3</a>

フィドルの例 http://jsfiddle.net/hVGRy

4

1 に答える 1

0

$シンボルを間違った方法で使用しています。

プロトタイプでは、$と$$は互いに大きく異なります。

  • $equals document.getElementById、一致した要素を返します。見つからない場合は return null;
  • $$equals document.querySelectorAll、一致した要素を含む配列を返します。見つからない場合は を返します[]。

コードは次のようになります。

$$( '#slider div.controls a.active' ).invoke( 'removeClassName', 'active' );
$$( 'a[href=' + this.current.id + ']' )[0].addClassName( 'active' );

OK、元のものは 1 つのスライドでしか機能しません。複数のスライドのハックを次に示します。

// glider.js
addObservers: function() {
  var controls = this.wrapper.getElementsBySelector('.controls a');
  controls.invoke('observe', 'click', this.events.click);
}

moveTo: function(element, container, options){
  this.current = typeof element === 'string' ? this.wrapper.getElementsBySelector( '#' + element )[0] : $( element )

  this.wrapper.getElementsBySelector( '.controls a.active' ).invoke( 'removeClassName', 'active' )
  this.wrapper.getElementsBySelector( 'a[href="#' + this.current.id + '"]' ).invoke( 'addClassName', 'active' )

  Position.prepare();
  var containerOffset = Position.cumulativeOffset( container ),
  elementOffset = Position.cumulativeOffset( this.current );

  this.scrolling  = new Effect.SmoothScroll(container, 
    {duration:options.duration, x:(elementOffset[0]-containerOffset[0]), y:(elementOffset[1]-containerOffset[1])});
  return false;
}

私のマシンでテストしました。

于 2013-02-01T19:15:23.863 に答える