我正在学习JS,遇到了一个问题。
我尝试了很多东西,谷歌了一下,但都是徒劳的。下面这段代码不能正常工作。我应该在点击时得到I的值,但它总是返回6。我在扯我的头发;请帮助。
for (var i = 1; i < 6; i++) {
console.log(i);
$("#div" + i).click(
function() {
alert(i);
}
);
}
斯菲德尔
我正在学习JS,遇到了一个问题。
我尝试了很多东西,谷歌了一下,但都是徒劳的。下面这段代码不能正常工作。我应该在点击时得到I的值,但它总是返回6。我在扯我的头发;请帮助。
for (var i = 1; i < 6; i++) {
console.log(i);
$("#div" + i).click(
function() {
alert(i);
}
);
}
斯菲德尔
当前回答
$("#div" + i).click(
function() {
alert(i);
}
);
因为它用i的值作为闭包。I是通过在foor循环的每个阶段都增加的闭包来记住的。
$("#div" + i).click(function(event) {
alert($(event.target).attr("id").replace(/div/g, ""));
});
其他回答
问题是,当你遍历循环时,i是递增的。结果是6。当你说alert(i)时,你是在要求javascript告诉你链接被点击时i的值是多少,到那时是6。
如果你想获取盒子的内容,你可以这样做:
For (var I = 1;I < 6;我+ +){ console.log(我); $("#div" + i).click(函数(e) { 警报($(这)。text ()); }); } div { 显示:inline-block; 宽度:15 px; 高度:15 px; 背景颜色:红色; } < script src = " https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js " > < /脚本> 1 < div id = " div1 " > < / div > 2 < div id = " div2 " > < / div > < div id = " div3 " > 3 < / div > 4 < div id = " div4 " > < / div > 5 < div id = " div5 " > < / div >
$("#div" + i).click(
function() {
alert(i);
}
);
因为它用i的值作为闭包。I是通过在foor循环的每个阶段都增加的闭包来记住的。
$("#div" + i).click(function(event) {
alert($(event.target).attr("id").replace(/div/g, ""));
});
演示工作
这是一个经典的JavaScript闭包问题。对i对象的引用存储在click处理程序闭包中,而不是i的实际值。
每一次点击处理程序都会引用相同的对象,因为只有一个持有6个的counter对象,所以每次点击你都会得到6个。
解决方法是将它包装在一个匿名函数中,并将i作为参数传递。原语在函数调用中按值复制。
for(var i=1; i<6; i++) {
(function (i) {
$("#div" + i).click(
function () { alert(i); }
);
})(i);
}
更新
更新演示
或者你可以用'let'代替var来声明i. let每次都会给你新的绑定。只能在ECMAScript 6严格模式下使用。
'use strict';
for(let i=1; i<6; i++) {
$("#div" + i).click(
function () { alert(i); }
);
}