0

我在一页上有两个滑翔机幻灯片。Slider #1 (#slider) 将显示 Slider #2 (#slider2) 的活动选项卡，而不是 Slider #1 中的活动幻灯片。我需要链接将其类更改为“活动”以获得正确的滑块。

这是发生的地方：

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

您$以错误的方式使用该符号。

在原型中，$彼此$$之间有很大不同：

  • $等于document.getElementById，返回匹配的元素，如果没有找到，返回null；
  • $$equals document.querySelectorAll，返回具有匹配元素的数组，如果没有找到，则返回[]。

您的代码应如下所示：

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

好的，原来的只适用于一张幻灯片，这是多张幻灯片的 hack：

// 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 回答