Question

我想弄明白这一点。我的HTML中有3个按钮id（test1，test2，test3）！在我的jQuery中，我在for循环中有一个click函数，如下所示：

$(document).ready(function() {
    for (var i = 0; i < 3; i++) {
        $("#test"+i).on('click', function() {
            alert("I am clicked! ("+i+")");
        });
    }  
});

现在，我正在警告他们每个人的消息，坚果所有（i）在警报中给出最后一个数字“3”...我如何得到它写“我被点击（1）”如果我按test1并且同样按下test2和test3？

I have a jsfiddle to explain here.

希望得到帮助并提前感谢; - ）

Answer 1

问题是，您分配的处理程序对i变量有持久引用，而不是该变量的副本。功能已创建。它们是闭包而不是i变量（和其他东西）。更多：Closures are not complicated

有几种方法可以解决这个问题。

您可以在元素上放置一条信息，以便它们可以共享一个单个处理程序，这可能是首选。（您实际上已经在示例中包含了这些信息，我们可以从元素'i值中找出id，但我假设在现实世界中事情更复杂。）
```
$(document).ready(function() {
    for (var i = 0; i < 3; i++) {
        $("#test"+i).attr("data-index", i).click(clickHandler);
    }  

    function clickHandler() {
        alert("I am clicked! ("+this.getAttribute("data-index")+")");
        // Or:
        alert("I am clicked! ("+$(this).attr("data-index")+")");
    }
});
```
Updated Fiddle

请注意我们只有一个处理函数，它会处理所有元素的点击。

使用单个处理程序也可能意味着您可以利用事件委派，在祖先元素上挂钩click而不是在每个单独的元素上挂钩，例如：
```
$("selector for ancestor").on("click", "[id^=test]", ...);
```
Updated Fiddle

您可以使用构建器函数创建单击处理程序，以便它们关闭不会更改的内容（我们传递给构建器的参数）：

$(document).ready(function() {
    for (var i = 0; i < 3; i++) {
        $("#test"+i).on('click', buildHandler(i));
    }  

    function buildHandler(index) {
        return function() {
            alert("I am clicked! ("+index+")");
        };
    }
});

Updated Fiddle

Answer 2

尝试这样的事情

$(document).ready(function() {
for (var i = 0; i < 3; i++) {
    $("#test"+i).on('click', function() {
       var value = $(this).attr('id');
           value=value.replace("test", "");
           value=parseInt(value)+1;
        alert("I am clicked! ("+value+")");
    });
}  
});

for循环中增加的数量没有增加

2 个答案: