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

    })();

});

デモリンク

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とその仕組みについて学び、同じことを2回行わないでください。少し学ぶと、私が何について話しているのかがわかります。

注：リンクを介したオーバーライドの意味がわかりません。a私の例ではクリックイベントに添付しましたが、それはあなたが望むものではないかもしれません。もっと具体的にする必要があります。

リンククリックで迅速に実行

私はあなたがあなた自身であなたの人生を楽にして、次のようなリンクを追加することを提案します：

<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フェードとステージの削除を行い、それらを1つずつオフセットシーケンスで実行して、2番目から開始し、最初のステージが最後に開始するのか、まだわかりません。それが改善できる主な部分だと思います...