Question

我在一个页面上有两个滑翔机幻灯片。 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

Answer 1

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

在Prototype中，$和$$彼此差异很大：

$等于document.getElementById，返回匹配的元素，如果找不到，则返回null;
$$等于document.querySelectorAll，返回包含匹配元素的数组，如果找不到，则返回[]。

您的代码应如下所示：

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

好的，原版仅适用于一张幻灯片，这里是多张幻灯片的黑客攻击：

// 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;
}

在我的机器上测试过。

滑翔机幻灯片选项卡不能使用两个幻灯片 - 原型

1 个答案: