JavaScript 点击处理程序在 for 循环内无法按预期工作[重复]

我正在尝试学习 JS，但遇到了一个问题。

我尝试了很多事情并用谷歌搜索但都是徒劳。以下代码无法按预期工作。我应该得到的值i单击但它总是返回 6。我正在拔头发；请帮忙。

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

    console.log(i);

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

jsfiddle http://jsfiddle.net/rmXcF/

工作演示 http://jsfiddle.net/rmXcF/1/

这是一个经典的 JavaScript 闭包问题。参考i对象被存储在点击处理程序闭包中，而不是实际值i.

每个单击处理程序都将引用同一个对象，因为只有一个计数器对象保存 6，因此每次单击都会获得 6 个值。

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

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

UPDATE

更新演示 http://jsfiddle.net/rmXcF/4/

或者你可以使用'let' https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let反而var声明i. let每次都给您带来新鲜的绑定。它只能在 ECMAScript 6 中使用strict mode.

'use strict';

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

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