JavaScript点击处理程序在for循环中没有像预期的那样工作

2018-05-29 10:55:06

这个问题在这里已经有了答案：

JavaScript关闭如何工作？ 88个答案

工作DEMO

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

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

解决方法是将其封装在一个匿名函数中，并将其作为参数传递给我。基元在函数调用中通过值复制。

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

UPDATE

更新DEMO

或者你可以用'let'来代替var来声明i 。 let每次都给你新鲜的约束力。它只能用于ECMAScript 6 strict mode 。

'use strict';

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

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

问题是，当你迭代循环时， 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());
    });
}

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

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

这是因为它使用i的值作为闭包。 i通过在封闭环的每个阶段增加的封闭来记住i 。

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

链接地址: http://www.djcxy.com/p/1467.html