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

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

工作演示

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

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

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

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

更新

更新的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());
  });
}

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>

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

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