關於jQuery的編寫插件

當

嗨，我使用jQuery編寫插件，目前面臨局部變量辦案的新手，關於jQuery的編寫插件

這裏存儲本地變量是所有參考

<div class="apple"></div> 
    <div class="apple"></div> 
    <script> 
    var apple = [1,3]; 

    $(function(){ 
     $.fn.Hello = function(){ 

      return this.each(function(){ 
      var apple = 0; 
      $.fn.extend({ 

       setApples:function(num_of_apples){ 
        apple = num_of_apples 
       }, 
       getApples:function(){ 
         return apple; 
       } 
      }); 
      }); 
     } 


     var i = 0; 
     var $apples = $('.apple').Hello(); 
     $apples.each(function(){ 
      console.log(apple[i]); 
      $(this).setApples(apple[i]); 
      i++; 
     }); 

     var j = 0; 
     $('.apple').each(function(){ 

      console.log("Apple "+j+":"+$(this).getApples()); 
      j++; 
     }); 
    }); 
    </script>

一些代碼

我想結果是蘋果0:1 蘋果1：3

但最後設置將始終覆蓋最後的結果。實際結果：蘋果0：3 蘋果1：3

我嘗試變量改變從apple到this.apple，但它會返回我不確定的結果。我可以知道我的代碼中有什麼錯誤嗎？

我嘗試去谷歌搜索，還有另一種替代方案，使用$(this).data('apple',value)進行設置，$(this).data('apple')獲取該值，但由於我想對蘋果的數量進行一些計算，例如，蘋果++，這將是繁瑣的做得到並通過這種方法設置

例如$(this).data('apple',$(this).data('apple')+1);，所以想問是否有任何其他替代這種情況下，謝謝。

來源

2016-09-01 ahyan

即使你做了this.apple，你仍然會從蘋果數組中獲得最後一項。這是因爲您將使用原型來存儲跨所有jQuery對象共享的Apple的值。 E.g

$.fn.extend({ 
      apples:0, 
      setApples:function(num_of_apples){ 
       this.apples = num_of_apples 
      }, 
      getApples:function(){ 
        return this.apples; 
      } 
     });

如果你想存儲每個元素的快捷方式會與實際需要將其存儲的元素，但使用擴展方法來抓住它的值。

$.fn.Hello = function(){ 
     return this.each(function(){ 
     $.fn.extend({ 
      setApples:function(num_of_apples){ 
       this.data("apple", num_of_apples) 
      }, 
      getApples:function(){ 
        return parseInt(this.data("apple")); 
      } 
     }); 
     }); 
    }

你可以添加檢查，以確保它的一些被傳遞到setApples功能，但到目前爲止，這應該工作。

也作爲一個側面說明，您可以改善循環

var i = 0; 

$.each(function(){ 
    i++ 
});

你可以使用

$.each(function(index){ 
// use index here. 
}

這裏是它的文檔：https://api.jquery.com/each/

同樣的工作示例蘋果問題在這裏：https://jsfiddle.net/y27tn5wg/

來源

2016-09-01 11:21:07

關於jQuery的編寫插件

回答

相關問題