JavaScript单击处理程序在for循环中未按预期工作[重复]答案

【问题标题】：JavaScript click handler not working as expected inside a for loop [duplicate]JavaScript单击处理程序在for循环中未按预期工作[重复]
【发布时间】：2013-05-11 11:40:18
【问题描述】：

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

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

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

    console.log(i);

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

jsfiddle

【问题讨论】：

你正在处理一个闭包：stackoverflow.com/questions/111102/…

标签： javascript event-handling mouseevent jquery-events

【解决方案1】：

Working DEMO

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

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

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

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

更新

Updated DEMO

或者您可以使用'let' 而不是var 来声明i。 let 每次都为您提供新的绑定。它只能在 ECMAScript 6 strict mode 中使用。

'use strict';

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

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

【讨论】：

【解决方案2】：

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

这是因为它使用i 的值作为闭包。 i 通过闭包被记住，闭包在 foo 循环的每个阶段都会增加。

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

【讨论】：

【解决方案3】：

问题在于，当您遍历循环时，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());
  });
}

div {
  display: inline-block;
  width: 15px;
  height: 15px;
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>
<div id="div5">5</div>

【讨论】：