我正在学习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); }
        );
 }