ForループのonClickイベント

Question

forを使用してループを作成しようとしましたが、onclickイベントによってインクリメントしますが、動作しません。

JSの一部：

var gameCase = ['', '', '', '', '', '', '', '', ''], // 9 
    itemLists = $('game').getElementsByTagName('li'); // 9 items 

    for(var i = 0; i < itemLists.length; i++) { 
     // i already egal to 9 
     itemLists[i].onclick = function() { 
       // do something 
     } 
    } 

しかし、私は、リストの要素をクリックすることができたの前に、この場合には、のためにループがすでに終了しています。

さらに、私はクリックしたアイテムリストを取得して配列に保存したいと思います。私はgameCase [this]（onclick関数内）を試しましたが、それが良い方法かどうかはわかりません。

Answer 1

ジョンResig氏は「JavaScriptの忍者の秘密」に非常によく、このトピックをカバー（http://ejohn.org/apps/learn/#59）

あなたは私の価値維持するために、一時的なスコープを作成する必要があります

for (var i = 0; i < itemLists.length; i++) (function(i){ 
    itemLists[i].onclick = function() { 
     // do something 
    } 
})(i); 

編集：

var gameCase = ['', '', '', '', '', '', '', '', ''], // 9 
$listParent = $('game').find('ul'), // li's parent 
itemLists = $('game').getElementsByTagName('li'); // 9 items 

var listHandler = (function() { 
    var i = 0; 

    return function() { 
    // $(this) will in here refer to the clicked li 
    i++ // increment i 

    if (i === 9) { 
     $listParent.off('click', 'li', listHandler); //remove eventhandler when i reaches 9 
    } 
    } 
}()); 

$listParent.on('click', 'li', listHandler); // attach eventhandler to ul element 

これは私が仕事中であるので、これは今すぐテストできません。

Answer 2

あなたのリスナーをラップ：

onclick = (function(i) {return function() { 
    ... 
};})(i); 

これはあなたの変数のスコープの問題を修正します。

Answer 3

申し訳ありませんがあなたの質問を正しく理解していない場合は、 私は理解しているコードから、ゲームタグ内のすべてのリスト要素にonclickハンドラを追加しようとしています（おそらくクラス/ id ）。

forループは、スクリプトタグ/ファイルがユーザー操作なしで読み込まれたときに実行されます。

カウンタの現在の値を使用する関数を割り当てる場合。次のコードを使用してください：

itemLists[i].onclick = (function() { 
    return function() { 
     // TODO --- 
     // Your handler code here 
} 
})();