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

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

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

在原型，$和$$这么多彼此不同：

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

你的代码应该是这样的：

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

---

OK，原来只有一个幻灯片工作，这里有多个幻灯片黑客攻击：

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

测试上我的机器。