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中，范围是@ function level而不是块级别。

试试这个：

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值不是唯一值，则此答案不适用。

关于'click'的基本jquery循环问题

5 个答案: