[解決済み】JavaScriptのクリックハンドラがforループの中で期待通りに動作しない【重複あり

質問

私はJSを学ぼうとしていますが、問題が発生しました。

いろいろと試したり、ググったりしましたが、すべて無駄でした。以下のコードは期待通りに動きません。私はの値を取得する必要があります i をクリックすると、常に6が返されます。髪を引っ張り出しているところです。

for (var i = 1; i < 6; i++) {

    console.log(i);

    $("#div" + i).click(
        function() {
            alert(i);
        }
    );
}

jsfiddle

解決方法は？

動作確認済みDEMO

これは、JavaScriptの典型的なクロージャーの問題です。クロージャの i オブジェクトの実際の値ではなく、クリックハンドラークロージャに格納されています。 i .

クリックハンドラはすべて同じオブジェクトを参照します。なぜなら、6を保持するカウンターオブジェクトは1つしかないので、クリックするたびに6を取得するからです。

回避策としては、これを無名関数でラップし、i を引数として渡します。プリミティブは関数呼び出しの際に値でコピーされます。

for(var i=1; i<6; i++) {
     (function (i) {
        $("#div" + i).click(
            function () { alert(i); }
        );
     })(i);
}

アップデイト

更新されたDEMO

または 'レット' 代わりに var を宣言します。 i . let は、毎回新しいバインディングを与えます。これは ECMAScript 6 でのみ使用可能です。 strict mode .

'use strict';

for(let i=1; i<6; i++) {

        $("#div" + i).click(
            function () { alert(i); }
        );
 }