围绕“点击”的基本jQuery循环问题

Question

基本问题，但我一直在敲我的头，所以想把它带到这里。

html 看起来像这样（编辑，修正了右引号）

<span class='deleteimage-119'>delete</span>
<span class='deleteimage-120'>delete</span>
<span class='deleteimage-121'>delete</span>
<span class='deleteimage-122'>delete</span>
<span class='deleteimage-123'>delete</span>

javascript/jquery 看起来像这样

iids = ['119','120','121','122','123'];
for (i=0; i<iids.length; i++) {
        place = iids[i];
        $(".deleteimage-" + place).click(function () {
                alert(place);
             });
    }

点击功能附加到每个单独的跨度，但点击后的警报只显示数组中的最后一项。

Answer 1

您有一个范围界定问题。到回调触发时，place 具有循环中的最后一个值。

你需要为闭包创建一个新变量；每次迭代一个变量，然后每个变量都将被闭包“捕获”并在回调中使用。

如果解决方案是这样就好了：

var iids = ['119','120','121','122','123']; // don't forget `var` please
for (var i=0; i<iids.length; i++) {
   var place = iids[i]; // local variable?
   $(".deleteimage-" + place).click(function () {
       alert(place);
   });
}

唉，Javascript 没有块作用域，所以这里仍然只有一个名为 place 的变量，它会随着循环的运行而不断更新。

所以，你必须使用一个函数来代替：

var iids = ['119','120','121','122','123'];

function f(place) {
   // NOW `place` is a local variable.
   $(".deleteimage-" + place).click(function () {
       alert(place);
   });
}

for (var i=0; i<iids.length; i++) {
   f(iids[i]);
}

有使用闭包和绑定变量来使用这种函数方法的更简洁的方法，其他答案很好地涵盖了这些更简洁的方法。我的回答侧重于解释问题。

Answer 2

问题在于范围和闭包。 在 JS 中，作用域是@函数级别而不是块级别。

试试这个：

var iids = ['119','120','121','122','123']; 
for (i=0; i<iids.length; i++) {         
    place = iids[i];
    var clickFn = function(a){
        return function(){
         alert(a);
        }
    }(place);
    $(".deleteimage-" + place).click(clickFn );     
} 

Answer 3

这是因为点击是在循环完成后发生的，所以您正在提醒place = iids[iids.length - 1]。为了达到您正在寻找的结果，您需要创建一个函数闭包并将place 作为参数传递：

iids = ['119', '120', '121', '122', '123'];
for (i = 0; i < iids.length; i++) {
    place = iids[i];
    (function(_place) {
        $(".deleteimage-" + _place).click(function() {
            alert(_place);
        });
    } (place));
}

Answer 4

在循环内部，您将click 事件绑定到span，但这些事件仅在循环完成后才会触发。因此，它将始终显示最后一个值。

Answer 5

正如其他人所提到的，您有一个范围界定问题。除非所有这些类都具有独特的含义，否则我会将 place 值移动到数据属性并将 deleteimage 保留为类名。比如：

<span class='deleteimage' data-place='119'>delete</span>
<span class='deleteimage' data-place='120'>delete</span>
<span class='deleteimage' data-place='121'>delete</span>
<span class='deleteimage' data-place='122'>delete</span>
<span class='deleteimage' data-place='123'>delete</span>

$(".deleteimage").click(function() {
    var place = $(this).data("place");
    alert(place);
});

如果 place 值不是唯一值，则此答案不适用。