javascript单击处理程序在for循环内不按预期工作

JavaScript click handler not working as expected inside a for loop

本问题已经有最佳答案，请猛点这里访问。

我在学习JS，但遇到了一个问题。

我尝试了很多东西，在谷歌上搜索，但都是徒劳的。下面的代码不能按预期工作。我应该在单击时得到i的值，但它总是返回6。我在拔头发，请帮忙。

1
2
3
4
5
6
7
8
9
10

for (var i = 1; i < 6; i++) {

console.log(i);

$("#div" + i).click(
function() {
alert(i);
}
);
}

杰西德

相关讨论

工作演示

这是一个典型的JavaScript关闭问题。对i对象的引用存储在单击处理程序闭包中，而不是i的实际值。

每个单击处理程序都将引用同一个对象，因为只有一个计数器对象可容纳6个对象，所以每次单击都有6个对象。

解决方法是将其包装在一个匿名函数中，并将i作为参数传递。原语在函数调用中按值复制。

1
2
3
4
5
6
7

for(var i=1; i<6; i++) {
(function (i) {
$("#div" + i).click(
function () { alert(i); }
);
})(i);
}

更新

更新演示

或者你可以用"let"代替var来声明i。let每次都给你新的装订。只能在ecmascript 6 strict mode中使用。

1
2
3
4
5
6
7
8

'use strict';

for(let i=1; i<6; i++) {

$("#div" + i).click(
function () { alert(i); }
);
}

问题是，当您在循环中迭代时，i是递增的。结果是6。当你说alert(i)时，你要求javascript告诉你点击链接时，i的值是多少，到那一点是6。

如果您想改为获取框中的内容，可以这样做：

1
2
3
4
5
6
7
8

for (var i = 1; i < 6; i++) {

console.log(i);

$("#div" + i).click(function(e) {
alert($(this).text());
});
}

工作示例：http://jsfiddle.net/rmxcf/2/