javascript - for循环中增加的数字不增加

Question

我正在尝试解决这个问题。我的 HTML 中有 3 个按钮 id(test1、test2、test3)!在我的 jQuery 中，我在 for 循环中有一个点击函数，如下所示:

$(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

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

1. 您可以在元素上放置一条信息，以便它们都可以共享一个单个处理程序，这可能是首选。 (实际上，您的示例中已经有了该信息，我们可以从元素的 id 值中找出 i ，但我假设在现实世界中事情更加复杂.)

   $(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

   请注意我们如何只有一个处理函数，并且它处理所有元素上的点击。

   使用单个处理程序还可能意味着您可以利用事件委托(delegate)，将click挂接到祖先元素而不是每个单独的元素上，例如:

   $("selector for ancestor").on("click", "[id^=test]", ...);
   

   Updated Fiddle

2. 您可以使用构建器函数来创建点击处理程序，以便它们关闭不会更改的内容(我们传递给构建器的参数):

   $(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