javascript - 通过链接覆盖 jQuery 循环

Question

是否可以通过链接访问 jQuery 循环以覆盖 i 变量？

我见过这样做的例子，但不是在这样的情况下，其中循环（）函数位于变量内：

$(document).ready(function() {
    $('div[id^="content-"]').hide();
});

$(window).load(function() {

    var divs = $('div[id^="content-"]').hide(),
        i = 0;

    (function cycle() {

        divs.eq(i).fadeIn(400)
                  .delay(5000)
                  .fadeOut(400, cycle);

        if (typeof window["Stage" + i] != 'undefined')
        {
            window["Stage" + i].destroy();
        }

        i = ++i % divs.length; // increment i, 
                               // and reset to 0 when it equals divs.length
        if (i == 1)
        {
            window["Stage" + i] = new swiffy.Stage(document.getElementById('graph_lines'), swiffyobject);
        }
        else if (i === 0)
        {
            window["Stage" + i] = new swiffy.Stage(document.getElementById('circle_lines'), circleobject);
        }

        window["Stage" + i].start();

    })();

});

演示链接

Answer 1

如果您询问是否可以全局访问循环，那么简短的答案是

不

您的cycle函数是私有函数闭包的一部分。您必须使其全球化才能以这种方式工作。但强烈建议我们不要污染全局范围，因此您应该将此函数应用于该闭包内的链接：

$(function(){
    var divs = $('div[id^="content-"]').hide();

    var cycle = function() {
        // do the thing although you're using globals etc.
    }

    $("a").click(cycle);
});

无论如何，这是执行此操作的方法，但是除非确实需要它们，否则您必须清理删除全局变量的代码。并了解 jQuery 以及它是如何工作的，不要重复做同样的事情。稍微了解一下就知道我在说什么了。

注意：我不确定您所说的通过链接覆盖是什么意思。a在我的示例中，我已将其附加到 click 事件，但这可能不是您想要的。你必须更具体。

在链接点击时快速运行

我建议您让自己的生活变得轻松，并添加以下链接：

<a href="#" class="start-swiffy" data-swiffy="0">Start swiffy 0</a>

并改用以下代码：

$(function() {
    var divs = $('div[id^="content-"]').hide();

    divs.each(function(index) {
        $(this).fadeIn(400)
               .delay(5000)
               .fadeOut(400);

        // replaces first if statement
        window["Stage" + index] && window["Stage" + index].destroy();

        if (index === 0)
        {
            window["Stage1"] = new swiffy.Stage(document.getElementById('graph_lines'), swiffyobject);
        }

        if (index === divs.length - 1)
        {
            window["Stage0"] = new swiffy.Stage(document.getElementById('circle_lines'), circleobject);
        }

        window["Stage" + ((index + 1) % divs.length)].start();
    });

    $("a.start-swiffy").click(function(evt) {
        evt.preventDefault();
        window["Stage" + $(this).data("swiffy")].start();
    });
});

即使我仍然不明白为什么你要做所有这些div淡入淡出和移除阶段并以偏移顺序运行它们以便它们从第二个开始而第一个从最后开始？这是我想可以改进的主要部分......