爲什麼在創建jquery插件時使用每個插件

在創建插件時，我對每個插件的使用都有些困惑。我創建了一個簡單的插件與回調作爲測試。爲什麼在創建jquery插件時使用每個插件

<div>Click me 1</div> 
<div>Click me 2</div>

無每個： -

(function($){  
    $.fn.TestCallBack = function(options){ 
     var defaults = { 
      onClicked :function(){} 
     } 

     var settings = $.extend({}, defaults, options); 

     function DoSomething(){ 
      settings.onClicked.call(this);  
     } 

     $(this).bind("click", DoSomething);  

     return this; 
} 
})(jQuery); 

$("div").TestCallBack({onClicked:function(){ 
    console.log($(this).html()); 
}});

這將產生的結果

Click me 1 
Click me 2

對於每個： -

(function ($) { 
    $.fn.TestCallBack = function (options) { 
     var defaults = { 
      onClicked: function() {} 
     } 

     var settings = $.extend({}, defaults, options); 

     function DoSomething() { 
      settings.onClicked.call(this); 
     } 

     this.each(function(){ 
      $(this).bind("click", DoSomething); 
     });   

     return this; 
    } 
})(jQuery); 

$("div").TestCallBack({ 
    onClicked: function() { 
     console.log($(this).html()); 
    } 
});

這將產生的結果

Click me 1 
Click me 2

我認爲使用每個會遍歷找到的div，但爲什麼不使用每個代碼提供相同的結果。我明顯在這裏錯過了一些東西。有任何想法嗎？

來源

2013-08-02 Richard Banks

你做this的唯一的事情是要求它jQuery的bind。這在內部爲集合this的所有元素執行該操作。

您需要做的與他們的東西是不會自動應用到設定的所有項目時，遍歷所有元素與each。

來源

2013-08-02 13:59:12

感謝。你能舉出一些不能自動應用於所有元素的例子嗎？ –

jQuery的操作與將它們應用於整個元素集相當一致。但想象一下，你會想要做一些基於如下條件的東西：'if（this.hasClass（'test'））' 當把這個集合作爲一個整體對待時，這是行不通的，你必須檢查每一個如果它具有該類，則該集合中的項目。 –

您使用each能夠遵循迴歸原設定的jQuery對象，這反過來又使鏈接的jQuery的約定。

您使用each不會使它的方式。應該像這樣使用：

$.fn.extend({ 
     TestCallBack : function() { 
      return this.each(function() { 
       // write your code here 
      }); 
     } 
});

現在你可以像這樣的代碼：

$('div').TestCallBack().stop().show(). .....

沒有each回來，你將無法在原設定鏈進一步jQuery方法。

點擊此處瞭解詳情：http://learn.jquery.com/plugins/basic-plugin-creation/

向下滾動該網頁的部分上：「使用each（）方法」

來源

2013-08-02 14:01:43 Abhitalks

你的主要觀點是關於返回原始設置以允許'方法鏈接'。這不是OP的主要關注點。儘管你對文檔的參考是一個很好的起點。 –

我認爲Op的問題與問題標題中提到的一樣：「*爲什麼在創建jQuery插件時使用每個插件*」，所以我解釋了「each」的用法以及爲什麼它不適用於他的場景。 – Abhitalks

是的，但你的主要觀點是方法鏈。爲了達到這個目的，你也可以做一個'返回這個;'當你的操作完成時 - 沒有每個參與者。使用'each'背後的真正意義在於循環遍歷集合中的所有元素，並對所有元素執行插件操作，因爲它是處理元素集的非常常見的jQuery方法（即通過'css類選擇它們'。 –

爲什麼在創建jquery插件時使用每個插件

回答

相關問題