的Javascript - 將事件循環

Question

可能重複：
adding ‘click’ event listeners in loop

我做一個demo.So讓我們先來看看HTML。

<a href="#" id="testA">testA</a> 
<a href="#" id="testB">testB</a>  

<div id="showA">showA</div> 
<div id="showB">showB</div> 

，我想click事件綁定到元素a。當它點擊時，alert的相關div。 （點擊id="testA"，提醒id="showA" ...）

而我寫的jQuery代碼。

var arr = ["A","B"];  
    for(var i=0;i<arr.length;i++){ 
    $("#test"+arr[i]).click(function(){ 
     alert($("#show"+arr[i]).text()) 
    }); 
    } 

但它不起作用。我調試此代碼並發現此代碼alert($("#show"+arr[i]).text())

只有當我點擊a元素時纔會運行。當我點擊a。變量i已經是3。

那我該怎麼辦？

Answer 1

問題是，一旦執行事件處理程序，i將達到其最終值並被卡在arr.length。您可以使用一個封閉的循環的每次迭代捕捉i值：

var arr = ["A","B"];  
for(var i=0;i<arr.length;i++) { 
    (function (i) { 
     $("#test"+arr[i]).click(function(){ 
      alert($("#show"+arr[i]).text()) 
     }); 
    }(i)); 
} 

這裏有一個working example。

Answer 2

最簡單/最乾淨的解決方案是使用forEach循環代替。

arr.forEach(function(val) { 
    $("#test"+ val).click(function() { 
    alert($("#show"+ val).text()) 
    }); 
}); 

如果您想要支持舊版本的瀏覽器，則會有很多在線的polyfill。

編輯：由於您使用jQuery你也可以$.each做到這一點：

$.each(arr, function(idx, val) { ... });