Javascript 使用moo工具操作多个滑动对象的最佳方法'；特效幻灯片

我正试图想出一个最优雅的解决方案来处理mootools中的多张Fx.Slides。我正在开发一个字典页面，其中有一个很长的单词列表，其中有一对单词——翻译，默认情况下，所有翻译都必须隐藏，只显示一个单词列表。我正在寻找一种解决方案，它不需要为页面上的每个单词创建单独的幻灯片，这样，当访问者点击一个单词时，就可以动态创建幻灯片，因为脚本的大小和性能与我有关。还有一个问题是，它们的初始状态必须事先设置为“隐藏”，我不想在CSS中这样做（这会对浏览器不支持javascript的人隐藏所有内容）。

---

这类事情可能发生吗？或者我必须依赖于在循环中创建幻灯片（我的元素ID类似于w01、w02等）？如果是这样，我将如何将该块放入循环中？

检查关于用户是否没有Javascript的问题

在那之后，我们可以集中精力在mootools上。当您使用Javascript加载页面时，您希望元素具有

visability:hidden

。给你的元素一个类，这样我们可以一次选择它们。初始化元素的示例

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

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

html示例：

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

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

​ 小提琴示例：

编辑：如果有很多元素应该有单击事件，那么最好使用事件委派。然后，您只需向页面添加一个事件侦听器，有时会产生巨大的差异

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

---

JSFIDLE示例：

检查这个关于用户是否没有Javascript的问题

在那之后，我们可以集中精力在mootools上。当您使用Javascript加载页面时，您希望元素具有

visability:hidden

。给你的元素一个类，这样我们可以一次选择它们。初始化元素的示例

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

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

html示例：

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

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

​ 小提琴示例：

编辑：如果有很多元素应该有单击事件，那么最好使用事件委派。然后，您只需向页面添加一个事件侦听器，有时会产生巨大的差异

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

---

jsFiddle示例：

非常感谢。我对Javascript一无所知（也不知道如何处理类），开始使用数组进行循环，并使用wordslide[I]=new Fx.Slide（myobject[I]）.hide（）按顺序隐藏元素；但这是错误的。你的解决方案是完美的，正是我所希望的。3阿萨普·乔，你的方法没有本质上的错误。您只需实例化每个单词的

Fx.Slide

对象，并将其存储在一个数组中，以便在需要时进行迭代。这与使用

$$（）

基本相同，只是

$$（）

动态创建元素列表，然后公开

数组类型的方法。Nils方法的优势在于，如果列表是动态生成的，则调用
$$（.sliders）
将始终返回完整的单词列表（无论如何，使用
slider
类），而不是您必须维护所述的单词列表。非常感谢。我对Javascript一无所知（或不知道如何处理类），开始使用数组进行循环，并使用wordslide[I]=new Fx.Slide（myobject[I]）.hide（）按顺序隐藏元素；但这是错误的。您的解决方案是完美的，这正是我所希望的。3ap Joe，您的方法本身没有任何问题。您只需实例化每个单词的
Fx.Slide
对象，并将其存储在数组中，以便在需要时进行迭代。这与使用
$$（）
，除了
$$（）
动态创建元素列表，然后公开
数组
类型的方法。Nils方法的优势在于，如果列表是动态生成的，则调用
$$（.sliders）
将始终返回完整的单词列表（无论如何，使用
slider
类），而不是您必须维护所述的单词列表。我添加了一个替代解决方案来添加事件侦听器，以防您有大量要切换的内容。我添加了一个替代解决方案来添加事件侦听器，以防您有大量要切换的内容。