javascript - For 循环中的 onClick 事件

Question

我试图用 for 创建一个循环，并通过 onclick 事件递增，但它不起作用。

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

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

但在这种情况下，for 循环在我能够单击列表中的元素之前完成。

此外，我想获取我点击的项目列表并将其保存在一个数组中。我尝试了 gameCase[this](在 onclick 函数中)，但我不知道这是不是好方法。

Answer 1

John Resig 在“JavaScript 忍者的 secret ”(http://ejohn.org/apps/learn/#59) 中很好地介绍了这个主题

您需要创建一个临时作用域来保留 i 的值

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

这应该可以满足您的需求，因为我在工作，现在无法测试它。