DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 淺談JS閉包中的循環綁定處理程序
淺談JS閉包中的循環綁定處理程序
編輯:關於JavaScript     

前幾天工作中寫前端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閉包中的循環綁定處理程序的理解,分享給大家,希望能對小伙伴們有所幫助

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved