为什么来自循环的警报总是返回最后一个值，而不是每个迭代值

Why does the alert coming from my loop always return the last value, not each iteration value?

本文关键字：迭代 最后一个 返回 循环 为什么      更新时间：2023-09-26

我有一些按钮，它们存储在一个数组中。然后，我循环遍历该数组，为每个按钮添加一个单击事件。每次单击都会提醒i的值。我希望这些值是1、2、3等等，但在3的情况下，它们总是作为一个值返回。

你能解释一下为什么会发生这种情况以及如何解决吗？

请参阅一个jsFiddle。以下代码：

var theButtons = ['.button.one', '.button.two', '.button.three'];
for (i=0; i<theButtons.length; i++) {
    $(theButtons[i]).click(function () {
        alert(i); // always returns 3
    });
}

请尽可能简单明了地解释它——我在Javascript和编程方面有点初学者

单击按钮i === 3时。需要将i的值传递到闭包中：

for (var i = 0; i<theButtons.length; i++) { // do `var i` so the i is not global
    (function(index){
        $(theButtons[i]).on('click', function () {
           alert(index); // index === the value that was passed
        });
    })(i); // pass the value of i
}

Fiddle演示：http://jsfiddle.net/maniator/fE55Y/3/

只需使用EACH方法：

$( ".button" ).each(function( index ) {
    $(this).click( function(e){
        alert( index + ": " + $(this).text());
    });
});

Fiddle：http://jsfiddle.net/fE55Y/4/

更新：

同意所要求的内容不需要.each()。这是一个没有使用.each()方法的。

$(".button").click(function () {
    alert("Button Index: " + $(this).index());
});

欢迎使用异步编程和全局变量！

您在这里看到的问题是，在这种情况下，i是全局声明的，任何东西都可以从任何地方访问。

所以，当你的脚本被执行时会发生什么：

  • 循环遍历类名数组
  • 在每次迭代中，将一次单击绑定到匹配的节点，调用您提供的匿名函数

这里的问题是，您提供的函数是在循环之外执行的（例如，当单击发生时），因此i的值是上次迭代中的值，在本例中是2

相关文章：