on循环中的onClick事件 [英] onClick event in a For loop

问题描述

js的一部分：

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

  var gameCase = [''，''，''，''，''，''，''，'' ，'']，// 9 
 itemLists = $（'game'）。getElementsByTagName（'li'）; // 9 items 
 
 for（var i = 0; i< itemLists.length; i ++）{
 //我已经等于9 
 itemLists [i] .onclick = function（）{
 //做某事
} 
} 
  

<但是在这种情况下，For循环已经完成了，然后我可以点击列表中的一个元素。

另外，我想得到这个项目列表我单击并将其保存在数组上。我尝试了一个gameCase [这个]（在onclick函数中），但是我不知道这是不是好的方法。 解决方案

John Resig在JavaScript忍者的秘密（ http://ejohn.org/apps/learn/#你需要创建一个临时范围来保存我的价值

$ $ p $ （函数（i）{
itemLists [i] .onclick = function（）{
/ /做某事
}
}）（i）;

编辑：

  var gameCase = [''，''，''，''，''，''，''，''，'']，// 9 
 $ listParent = $（'游戏'）。find（'ul'），// li's parent 
 itemLists = $（'game'）。getElementsByTagName（'li'）; // 9项目
 
 var listHandler =（function（）{
 var i = 0; 
 
 return function（）{
 // $（这里）将在这里引用点击li 
 i ++ //增加i 
 
 if（i === 9）{
 $ listParent.off（'click'，' li'，listHandler）; //当我达到9 
} 
} 
}（））时移除eventhandler; 
 
 $ listParent.on（'click'，'li'，listHandler）; //附加eventhandler到ul元素
  

这个应该是你想要的，现在不能测试了，在工作。

I've tried to create a loop with a for, and increment by an onclick event, but it doesn't work.

A part of 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
         }
    }

But in this case, the For loop is already finished before I was able to click on an element of the list.

Moreover, I would like to get the item list I clicked and save it on a the array. I tried a gameCase[this] (in onclick function), but I don't know if it's the good way.

解决方案

John Resig covers this topic very well in "Secrets of the JavaScript Ninja" ( http://ejohn.org/apps/learn/#59 )

You'll need to create a temporary scope to preserve i's value

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

Edit:

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

This should do what you want, cant test it right now since I'm at work.

这篇关于on循环中的onClick事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！