javascript - 使用 moo 工具的 Fx.Slide 操作许多滑动对象的最佳方法

Question

我试图想出最优雅的解决方案来处理 mootools 中的多个 Fx.Slides。我正在开发一个字典页面，其中包含很长的单词列表，其中有一对单词 - 翻译，默认情况下必须隐藏所有翻译，只显示一个单词列表。我正在寻找一种不需要为页面上的每个单词创建单独的幻灯片的解决方案，以便在访问者单击单词时即时创建它们，因为脚本的大小和性能受到影响关心我。还有一个问题是它们的初始状态必须事先设置为“隐藏”，我不想在 CSS 中这样做（这会对浏览器不支持 javascript 的人隐藏所有内容）。这种事情有可能吗，还是我必须依靠循环创建幻灯片（我的元素 ID 类似于 w01、w02、...）？如果是这样，我将如何将该块放入循环中？

Answer 1

查看有关用户是否没有带有 noscript 的 Javascript Embedding 额外样式的问题。

处理好之后，我们可以专注于 mootools。您希望元素在visability: hidden使用 Javascript 加载页面时具有。给你的元素一个类，这样我们就可以一次选择它们。初始化元素的示例。

$$('.sliders').each(function(el) {
    el.slide('hide').setStyle('visibility', 'visible');
});

现在我们需要处理点击事件。这里也是一样。

示例 html：

<h3 class="slideIn" >Some title</h3>
<div class="sliders>Some lengthy text<div>

示例 html：

$$('.slideIn').addEvent('click', function() {
    this.getNext().getChildren('.sliders').slide();
});

​ 小提琴示例：http: //jsfiddle.net/b4Zjs/

编辑：如果有很多元素应该有点击事件，最好使用事件委托。然后，您只需向页面添加一个事件侦听器，并且有时会产生巨大的影响。

$('parent').addEvent('click:relay(h3.slideIn)', function(event, target) {
   target.getNext().getChildren('.sliders').slide();
});

jsFiddle 示例：http: //jsfiddle.net/b4Zjs/2/