通过<a> link</a>覆盖jQuery循环

时间:2012-09-03 23:39:41

标签: javascript jquery

是否可以通过链接访问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();

    })();

});

Demo Link

1 个答案:

答案 0 :(得分:3)

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

您的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链接覆盖的含义。我已经在我的示例中附加了它来点击事件,但这可能不是你想要的。你必须要具体得多。

在链接上运行swiffy单击

我建议你让自己的生活变得轻松,并添加如下链接:

<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淡化和删除阶段并以偏移顺序运行它们,所以它们从第二个开始,第一个从最后开始?这是我猜的主要部分......