JavaScript单击处理程序在for循环中未按预期工作

Question

我正在尝试学习JS并遇到问题.

我尝试了很多东西并用Google搜索,但都是徒劳的.下面的代码段不能按预期工作.我应该点击我的价值,但它总是返回6.我把我的头发拉出来,请帮忙.

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

    console.log(i);

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

Answer 1

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

每个单击处理程序都会引用同一个对象,因为只有一个计数器对象可以容纳6个,所以每次点击就会得到6个.

解决方法是将其包装在匿名函数中并将i作为参数传递.在函数调用中按值复制基元.

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是什么,到那时为6.

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

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

    console.log(i);

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

Answer 3

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

这是因为它使用了i作为闭包的值.i通过闭合来记住,闭合在每个阶段都会增加.

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