javascript – For循环中的onClick事件

2019-09-26 03:36:26 阅读：153 来源： 互联网

标签：javascript for-loop javascript-events

我试图创建一个带有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
         }
    }

但在这种情况下,在我能够单击列表的元素之前,For循环已经完成.

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

解决方法:

John Resig在“JavaScript忍者的秘密”中很好地介绍了这个主题(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

这应该做你想要的,因为我在工作,现在不能测试它.

标签：javascript,for-loop,javascript-events
来源： https://codeday.me/bug/20190926/1818562.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – For循环中的onClick事件