7

セクションのクラスを持つすべての要素にイベント リスナーを追加しようとしていますが、ノード リストの最後のオブジェクトにのみ適用されます。

var section = document.querySelectorAll('.section');
for(var i=0;i<section.length;i++){
var elem = section[i];
elem.addEventListener('click', function () {move (elem)}, false); 
}

それぞれにイベントリスナーを追加する方法はありますか?

4

2 に答える 2

5

問題は、JavaScriptにブロックスコープがないことです。したがってelem、毎回新しい変数として宣言されるのではなく、反復ごとに上書きされます。各反復で新しい変数を宣言する唯一の方法は、関数を使用することです。

for(var i = 0; i < section.length; i++){
  (function(elem) {
    elem.addEventListener('click', function() { move(elem); }, false);
  })(elem);
}

しかし、要素にaddEventListener設定thisされるので、あなたの場合、あなたはきちんと行うことができます：

for(var i = 0; i < section.length; i++){
  elem.addEventListener('click', function () { move(this); }, false);
}
于 2012-12-07T21:48:17.180 に答える
1

これは、関数内で参照elemしているためですi。試してみることをお勧めします

var section = document.querySelectorAll('.section');
for(var i=0;i<section.length;i++){
    var handler = (function(ind){ 
        return function () {
             move (section[ind]);
        }
    })(i) 

    elem.addEventListener('click', handler, false); 
}
于 2012-12-07T21:41:48.873 に答える