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