Question

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

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

请参阅 a 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和编程的初学者。

Answer 1

当您点击按钮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
}

小提琴演示：http://jsfiddle.net/maniator/fE55Y/3/

Answer 2

只需使用EACH方法：

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

小提琴：http://jsfiddle.net/fE55Y/4/

更新

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

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

Answer 3

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

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

因此，执行脚本时会发生什么：

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

这里的问题是你提供的函数是在你的循环之外执行的（例如，当点击发生时），所以i的值是最后一次迭代中的值，在这种情况下{{1 }}

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

3 个答案:

更新