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

Question

基本问题，但我一直在敲我的头，所以认为ID带到这里。

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