javascript - 通过 链接覆盖 jQuery 循环

Question

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

我见过这样做的示例，但不是在这样的情况下，其中 cycle() 函数在变量中:

$(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();

    })();

});

Demo Link

Answer 1

如果你问循环是否可以全局访问，那么简短的回答是

没有

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

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

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

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

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

Note: I'm not sure what you mean by override via a link. I've attached to it to click event in my example, but that may not be what you want. You'll have to be much more specific.

在链接点击时快速运行

我建议您让自己的生活轻松一些，并添加如下链接:

<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 淡入淡出并删除阶段并以偏移顺序运行它们，以便它们从第二个开始，第一个最后开始？我想这是可以改进的主要部分......