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

javascript event-handling jquery-events mouseevent

2022-08-30 00:25:06

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

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

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

    console.log(i);

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

jsfiddle

答案 1

工作演示

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

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

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

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

更新

更新的演示

或者，您可以使用“let”来声明。每次都给你新的绑定。它只能在 ECMAScript 6 中使用。variletstrict mode

'use strict';

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

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

答案 2

问题在于，当您循环访问时，会递增。它最终得到的值为 6。当你说你要求javascript告诉你点击链接时的价值是什么，到那时是6。ialert(i)i

如果你想得到盒子里的东西，你可以做这样的事情：

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>