javascript - for循环中的增加数不上升

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）”如果我按 test2 和 test3，test1 和同样？

我有一个 jsfiddle 在这里解释。

希望提前帮助和感谢;-)

score 2 · Accepted Answer

问题是您分配的处理程序具有对变量的持久引用i，而不是创建函数时该变量的副本。它们是变量（和其他东西）的闭包。i更多：闭包并不复杂

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

您可以在元素上放置一条信息，以便它们都可以共享一个处理程序，这可能是首选。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")+")");
    }
});
```
更新小提琴

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

使用单个处理程序还可能意味着您可以利用事件委托，将挂接到click祖先元素而不是这些单独元素中的每一个，例如：
```
$("selector for ancestor").on("click", "[id^=test]", ...);
```
更新小提琴

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

$(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+")");
        };
    }
});

更新小提琴

score 1 · Accepted Answer

尝试这样的事情

$(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+")");
    });
}  
});

javascript - for循环中的增加数不上升

2 回答 2

Related

Reference