如何在 mootools 中链接数组？

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 属性（它应该是一个函数，但它没有' t 似乎有效），所以我最终得到了您在 chain() 调用中看到的匿名函数，这几乎同样好。循环闭包function(c1,c2)对于防止本地i循环变量在调用链式匿名函数时超出范围是必要的。

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

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

Answer 2

在我看来，这是一种更好/“mootoolsy”的做法。 FX 实例提供了两个可以使用的东西：link: "chain" 和 onComplete: 函数。所以像这样：

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 是直接同级