3

ループを使用してクラスにイベントをアタッチし、イベントハンドラーコードでインデックス値を使用しています。これが私のコードです：

var classElements=document.getElementsByClassName("a");
for(var i=0; i<4; i++)
{
    classElements[i].onClick=function(){
       alert("Clicked button : "+i);
    }
}

いずれかのボタンをクリックすると、アラートが表示されます

Clicked Button : 4

何が問題になる可能性がありますか？

4

2 に答える 2

4

JavaScript はオブジェクトを閉じ、後で呼び出されたときに評価します。呼び出されたときiは 4 です。

次のようなものが欲しいと思います：

var classElements=document.getElementsByClassName("a");
for(var i=0; i<4; i++)
{
    classElements[i].onClick=function(j) { 
       return function(){
          alert("Clicked button : "+j);
       };
    }(i);
}

編集：コードをより明確にするために名前付き関数とともに表示

var classElements=document.getElementsByClassName("a");
for(var i=0; i<4; i++)
{
    var makeFn = function(j) { 
       return function(){
          alert("Clicked button : "+j);
       };
    };
    classElements[i].onClick = makeFn(i);
}
于 2012-04-30T19:02:47.100 に答える
2

の変更をキャプチャするには、クロージャが必要ですi。Lou が述べたように、これは事後評価によるものです。

var classElements=document.getElementsByClassName("a");
for(var i=0; i<4; i++)
    classElements[i].onclick = (function(i){
          return function(){ alert("Clicked button : " + i) }; 
       })(i);
于 2012-04-30T19:02:52.467 に答える