jquery - jquery循环保存最后一个值

Question

我有带有编号 id 的 div，我想在 click 事件上处理：

$(function() { 
    for (var i = 1; i != 10; ++i) {
       $("#div" + i).live('click', function () {
           //...
           console.log(i); // always prints 10
       });
    }
});

// html
<div id="div1">...</div>
<div id="div2">...</div>
etc.

我期待每个 div 上的单击事件将触发其自己的事件处理程序。但事实并非如此。

请任何修复。

Answer 1

使用闭包：

$(function () {
    for (var i = 1; i < 11; i++) {
        (function (i) {
            $("#div" + i).live('click', function () {
                //...
                console.log(i); // always prints 10
            });
        }(i));
    }
});

但是根据您的 jquery 版本，您可以使用 .on() （委托）或 .delegate() 方法用作选择器：'[id^=div]'

Answer 2

for (var i = 1; i != 10; ++i)

为了

for (var i = 1; i != 10; i++)

Answer 3

循环保持最后一个值，因为在循环完成后调用实时事件。您需要将值传递给循环内的实时事件，如下所示：

$(function() { 
    for (var i = 1; i != 10; ++i) {
        $("#div" + i).live('click', {i: i}, function (e) {
            //...
            console.log(e.data.i); // prints correct value
        });
    }
});

Answer 4

$(function() { 
    $("div[id^=div]").click( function(){
        var id = $(this).attr('id').replace('div', '');
        console.log(id);
    });
});

我发现这种检查点击的方法更加紧凑和容易，这也是一个有效的小提琴，尽管已经有答案说明为什么你的 i 变量会粘住，所以请随意使用任何似乎合适的方法。