JavaScript的点击处理程序无法按预期在for循环内工作

我试图学习JS，并得到一个问题。

我尝试了很多东西，但是都是徒劳的。 以下一段代码不能按预期工作。 我应该点击我的价值，但它总是返回6.我拉我的头发，请帮助。

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

的jsfiddle

Answer 1

工作DEMO

这是一个经典的JavaScriptclosures问题。 i对象引用被存储在click处理函数中，而不是i的实际值。

每个单击处理程序都会引用同一个对象，因为只有一个计数器对象可以保存6个，所以每次点击都可以得到6个。

解决方法是将其封装在匿名函数中，并将其作为parameter passing给我。 基元在函数调用中被值复制。

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

UPDATE

更新了DEMO

或者你可以使用'让'而不是var来声明i 。 let每次给你新鲜的约束力。 它只能在ECMAScript 6 strict mode 。

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

Answer 2

问题是，当你遍历循环， i递增。 它的值是6.当你说alert(i)你要求javascript告诉你在点击链接的时候 i的价值是多less，到那时候是6。

如果你想获得盒子的内容，你可以做这样的事情：

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

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

Answer 3

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

这是因为它使用i的价值作为封闭。 i被记住通过闭合在foor循环的每个阶段增加。

 $("#div" + i).click(function(event) { alert($(event.target).attr("id").replace(/div/g, "")); });