javascript For 循环中的 onClick 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15860683/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
onClick event in a For loop
提问by jbr
I've tried to create a loop with a for, and increment by an onclick event, but it doesn't work.
我试图用 for 创建一个循环，并通过 onclick 事件递增，但它不起作用。
A part of js :
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.
但在这种情况下，For 循环在我能够单击列表元素之前已经完成。
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.
此外，我想获取我单击的项目列表并将其保存在数组中。我尝试了一个 gameCase[this]（在 onclick 函数中），但我不知道这是否是好方法。
回答by ruuska
John Resig covers this topic very well in "Secrets of the JavaScript Ninja" ( http://ejohn.org/apps/learn/#59)
John Resig 在“JavaScript Ninja 的秘密”（http://ejohn.org/apps/learn/#59）中很好地介绍了这个主题
You'll need to create a temporary scope to preserve i's value
您需要创建一个临时范围来保留 i 的值
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.
这应该做你想做的，因为我在工作，现在不能测试它。
回答by elslooo
Wrap your listener:
包装你的听众：
onclick = (function(i) {return function() {
...
};})(i);
This fixes your variable scope issues.
这解决了您的变量范围问题。
回答by Dev Shangari
Sorry if I did not understand your question properly, From the code I understand that, you are trying to add an onclick handler to all the list elements in found in the game tag (perhaps it should be a class / id).
抱歉，如果我没有正确理解您的问题，从代码中我了解到，您正在尝试向游戏标签中找到的所有列表元素添加一个 onclick 处理程序（也许它应该是一个类/ID）。
The for loop will be executed when the script tag / file loads without any user interaction.
在没有任何用户交互的情况下加载脚本标记/文件时，将执行 for 循环。
If you wish to assign a function that uses the current value of the counter. Use the following code:
如果您希望分配一个使用计数器当前值的函数。使用以下代码：
itemLists[i].onclick = (function() {
return function() {
// TODO ---
// Your handler code here
}
})();
回答by Richard Harrison
Another option is to use a forEach loop this creates a new variable for each iteration.
另一种选择是使用 forEach 循环，这会为每次迭代创建一个新变量。
var gameCase = ['', '', '', '', '', '', '', '', ''], // 9
itemLists = $('game').getElementsByTagName('li'); // 9 items
itemLists.forEach(function(item,index){
item.onclick = function() {
// do something
}
});
