基本的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值不是唯一值，那麼此答案不適用。