首頁 > 開發者 > JavaScript
淺談JS閉包中的迴圈綁定處理常式，淺談js
前幾天工作中寫前端js代碼時，遇到了遍曆元素給它添加單擊事件。就是這個問題讓我整整調了一個下午。最後還是下班回家，上網查資料才知道怎麼解決的。 （PS：之前也在《jQuery基礎教程》第四版中看過講迴圈綁定處理常式的內容，當時估計也沒怎麼用心看，所以沒記起來。）
大神要是知道這類情況，可以關掉視窗，寫這些主要是給像我一樣的小白看的。謝謝！
先貼上錯誤的例子讓大家看看。（例子裡面用到jQuery，請匯入jQuery庫）
複製代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>迴圈綁定處理常式</title>
<script src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
for(var i=1;i<=4;i++){
$("#btn"+i).get(0).onclick=function(){
alert(i);
}
}
});
</script>
</head>
<body>
<button id="btn1">按鈕1</button>
<button id="btn2">按鈕2</button>
<button id="btn3">按鈕3</button>
<button id="btn4">按鈕4</button>
</body>
</html>
這段代碼運行之後，點擊按鈕，彈出的alert中顯示資料幾呢，我之前一直認為按鈕1到按鈕4，對應的alert中的數字也是1到4。要是你也這樣想，那就錯了。
點擊每個按鈕，alert中都是顯示數字4，沒想到吧！
現在寫幾種解決方案，共大家參考 ！
第一種、編寫一個function，在這個function中返回一個函數
複製代碼 代碼如下:
<script type="text/javascript">
$(function(){
for(var i=1;i<=4;i++){
$("#btn"+i).get(0).onclick=btnClick(i);
}
});
var btnClick=function(value){
return function(){
alert(value);
}
}
</script>
第二種、使用立即調用函數運算式
(function(value){
//代碼塊
})(i)//這就是立即調用函數運算式
複製代碼 代碼如下:
<script type="text/javascript">
$(function(){
for(var i=1;i<=4;i++){
$("#btn"+i).get(0).onclick=(function(value){
return function(){
alert(value);
} })(i);
}
});
</script>
第三種、使用jQuery的each函數
複製代碼 代碼如下:
<script type="text/javascript">
$(function(){
$.each([1,2,3,4],function(index,value){
$("#btn"+value).get(0).onclick=function(){
alert(value);
}
});
});
</script>
使用上面三種情況，就可以避免一開始那個情況了。
其中get(0)指的是將jQuery對象轉為DOM對象。
以上就是個人對JS閉包中的迴圈綁定處理常式的理解，分享給大家，希望能對小夥伴們有所協助
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
