Question

假设你在mootools中有一个数组：

// get the elements and set them as slide
var slideElements = $$('.mySlideElements');
slideElements.set('slide');

// and fire the event -> would slide all elements out at the same time
slideElements.slide('out');

我怎么能把它放到链子里一次滑动一个？

到目前为止，如果我知道将要执行的操作的确切数量，我只能成功链接。谢谢你的帮助。

Answer 1

我最终在这个工作中投入了大量的工作，链接比我初看起来要困难得多。我之前从未以这种方式使用它：D

你绝对可以遍历slideElements数组。将元素事件相互链接是棘手的部分。我最终得到了一个循环闭包函数，循环遍历每个slideElement并将列表中的上一项链接到当前项：

<!-- Working example of chained sliding divs  -->
<div class="mySlideElements" style="background: red" id="slide1">Slide 1</div>
<div class="mySlideElements" style="background: yellow">Slide 2</div>
<div class="mySlideElements" style="background: green">Slide 3</div>
<div class="mySlideElements" style="background: purple">Slide 4</div>
<script type="text/javascript">
    var slideElements = $$('.mySlideElements');
    slideElements.set('slide');

    for(var i = 1; i < slideElements.length; i++) (function(c1,c2){
        c1.get('slide').chain(function(){c2.slide()});
    })(slideElements[i-1],slideElements[i]);

</script>

<input type="button" onclick="$('slide1').slide()" value="slide"/>

调用get('slide')将返回在每个元素上设置的Fx.Slide对象，然后您可以将其链接到函数。我的Mootools-fu不够强大，无法弄清楚如何将它直接链接到下一个元素的slide属性（应该是一个函数，但它似乎没有所以我最终得到了你在chain()调用中看到的匿名函数，这几乎同样好。循环闭包function(c1,c2)是必要的，以防止在链式匿名函数被调用时局部i循环变量超出范围。

它被设置为第一个元素的slide函数被触发时的连锁反应。如果您在单击任何元素时需要整个事件级联，您可能希望设置每个元素的onClick事件以触发第一个元素的slide()而不是他们自己的

无论如何，上面的代码是一个工作示例。我希望结果是你想要的。

Answer 2

在我看来，这是一种更好/“mootoolsy”的方式。 FX实例提供了两种可以使用的东西：link：“chain”和onComplete：function。所以像这样：

var slideEls = function(els) {
    if (!els.length)
        return;

    var lastEl = els.getLast();    
    lastEl.set("slide", {
        duration: "long",
        link: "chain",
        onComplete: function() {
            els.erase(lastEl);
            slideEls(els);
        }
    }).slide("out");
};

slideEls($$('div.mySlideElements'));

这里的工作示例：http://mootools.net/shell/GmUpM/

这将使用无限数组长度的元素滑出

Answer 3

试试这个：

$$('.mySlideElements')
    .set('slide', {
        onComplete: function (el) 
        {
            if (el = el.getParent().getNext ('.mySlideElements'))
                el.slide ('out');
        }
    })
    [0].slide ('out');

只需要.mySlideElements是直接兄弟姐妹

如何在mootools链接一个数组？

3 个答案: