0


0

値によるJavascript参照/参照による問題

ページングを行うためにjQueryプラグインを作成していますが、次の問題が発生しました。

下のプラグインによって作成されたページリンクをクリックすると、下のコードの最後の反復子で値iに渡された最後のインデックスの値が常に表示されます。 4ページある場合、リンク1、2、3、または4を押すと常に4が表示されます。 デリゲートonclickへの参照は、値だけでなくiの値への参照も保持しているようです。

何か案は? 奇妙な振る舞いをするのは* options.onclick(i)*です。

$.fn.pager = function(options) {
    var defaults = {
        resultSet: undefined,
        onclick: function(page) { alert(page); return false; },
    };

    return this.each(function () {
        var rnd = Math.floor(Math.random()*9999)
        var result = '';
        for(var i = 1; i <= options.resultSet.PageCount; i++)
        {
            if(i == options.resultSet.PageCount)
                result += '' + i + '';
            else
                result += '' + i + '' + options.separator;
        }

        $(this).html(result);

        for(var i = 1; i <= options.resultSet.PageCount; i++)
        {
            $('#' + rnd + '_pagerPage_' + i).click(function() { options.onclick(i) });
        }
    });
}

上記のコードを問題のあるケースに限定しました。 そのため、いくつかのチェックが欠落しています;)

2 Answer


1


_  — -- デリゲートonclickへの参照は、値だけでなくiの値への参照も保持しているようです。 _

 — -- _ _

あなたが経験しているのは、クロージャーとの最初の(予期しない)出会いです。 渡されるのは参照すらありません。それよりも奇妙です。 何が起こっているのかを理解するために(そして、javascriptでプログラムを作成する場合、これは基本的なことと考えられています)、次の関連する質問に対する私の答えを読んでください:

https://stackoverflow.com/questions/3572480/please-explain-the-use-of-javascript-closures-in-loops/3572616#3572616 [ループでのJavaScriptクロージャーの使用について説明してください]


0


これは古典的な問題です。オプションの「click」イベントハンドラー関数内で使用される「i」の値は、イベントが発生する時点で「i」が持つ値(最終的な値である4)になりますループ内)、イベントハンドラーを割り当てた時点で持っていた値ではありません。 方法としては、ループが呼び出されるたびに、 `i`の値のコピーを含む独自の変数を持つループを介して、追加の関数を作成します。

var createClickHandler = function(n) {
    return function() { options.onclick(n); };
};
$('#' + rnd + '_pagerPage_' + i).click( createClickHandler(i) );