Javascript Closure Problem

Question

私はこの種の質問がたくさん聞かれるのを知っていますが、私はまだこの作業を正しく行う方法を見つけることができませんでした。

コード：

function doStuff() { 
    for (var i = 0; i< elementsList.length; i++) { 
     elementsList[i].previousSibling.lastChild.addEventListener("click", function(){ 
        toggle(elementsList[i])}, false); 


     } 
    } // ends function 


    function toggle (element) { 
     alert (element); 
    } 

問題はトグル機能に変数を渡すことです。このキーワードで動作しますが（これはクリックされた項目への参照を送信しますが、この場合は役に立たない）、Firefoxでは未定義と警告するelementsList [i]では使用できません。

私が理解しているように、関数を呼び出すために匿名関数を使用すると、クロージャの問題に対処するだけで十分です。

Answer 1

試してみてください。

function startOfFunction() { 
    for (var i = 0; i< elementsList.length; i++) { 
     elementsList[i].previousSibling.lastChild.addEventListener(
      "click", 
      (function(el){return function(){toggle(el);};})(elementsList[i]), 
      false 
     ); 

    } 
} // ends function 


function toggle (element) { 
    alert (element); 
} 

Answer 2

試してみてください。

function doStuff() { 
    for (var i = 0; i< elementsList.length; i++) { 
     (function(x) { 
      elementsList[x].previousSibling.lastChild.addEventListener("click", function(){ 
       toggle(elementsList[x])}, false); 
     })(i); 



    } 
} // ends function 

私はそれが周りelementsList[i]を渡すの問題かもしれないと思うので、上記のコードは役立つはず閉鎖を持っています。

Answer 3

問題は、var iを使用したいということです。 iはonClickイベントで利用できます（クロージャやもの）。ループがあるので、iがカウントアップされます。ここで、いずれかの要素をクリックすると、iは常にelementsList.lengthになります（すべてのイベント関数は同じiにアクセスするため）。

を使用すると、Mattのソリューションが動作します。

Answer 4

説明として：forループで使用する無名関数は、変数 "i"を参照して、要素をトグルするようにします。無名関数は変数の「生きている」値を使用するので、誰かが要素をクリックすると、「i」は常にelementsList.length + 1になります。

Mattのコード例は、iを「固定」されている別の関数に貼り付けることでこれを解決しています。

イベントを添付している要素を反復処理する場合は、単純な匿名関数を使用しないでください。単純な匿名関数を使用しないで、各要素に対して新しい関数を作成してください。 Mattsの答えのより読みやすいバージョンは、次のようになります。

function iterate() { 
    for (var i = 0; i < list.length; i++) { 
     // In here, i changes, so list[i] changes all the time, too. Pass it on! 
     list[i].addEventListener(createEventFunction(list[i]); 
    } 
} 

function createEventFunction (item) { 
    // In here, item is fixed as it is passed as a function parameter. 
    return function (event) { 
     alert(item); 
    }; 
}