如何調用jQuery插件的用戶定義的方法

Question

我有一個jQuery插件，它接受多種元素和一些方法中的元素被稱爲像：

(function($){ 

    methods = { 
    init : function(options, callbacks) { 
     $.fn.myPlugin.settings = $.extend({ 
     'userDefinedMethod': function() {} 
     }, options); 

     return this.each(function(){ 
     $.fn.myPlugin.settings.userDefinedMethod(); 
     } 
    } 
    } 

    $.fn.myPlugin = function(method) { 
    if (methods[method]) { 
     return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); 
    } else if (typeof method === 'object' || ! method) { 
     return methods.init.apply(this, arguments); 
    } else { 
     $.error('Method ' + method + ' does not exists on jQuery.myPlugin'); 
    } 
    } 

})(jQuery); 

一個簡單的例子，這將讓你明白我想要什麼實現：

$(document).ready(function(){ 
    $('#myElement1, #myElement2, #myElement3').myPlugin({ 
    userDefinedMethod: function() { 
     // I want here to use the elements in selector 
     $(this).css('color', 'black'); 
    } 
    }); 
}); 

我知道$(this)在上面的例子將代表jQuery插件對象，但我想以某種方式在提供選擇使用每個元素。

Answer 1

$(document).ready(function() { 
    $('#myElement1, #myElement2, #myElement3').myPlugin({ 
     userDefinedMethod: function() { 
      // I want here to use the elements in selector 
      $(this).css('color', 'red'); 
     } 
    }); 
}); 

(function ($) { 

    methods = { 
     init: function (options, callbacks) { 
      //don't set the settings to shared object 
      this.settings = $.extend({ 
       userDefinedMethod: $.noop 
      }, options); 

      return this.each($.proxy(function (idx, el) { 
       //use Function.call() to set a custom execution context 
       this.settings.userDefinedMethod.call(el); 
      }, this)) 
     } 
    } 

    $.fn.myPlugin = function (method) { 
     if (methods[method]) { 
      return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); 
     } else if (typeof method === 'object' || !method) { 
      return methods.init.apply(this, arguments); 
     } else { 
      $.error('Method ' + method + ' does not exists on jQuery.myPlugin'); 
     } 
    } 

})(jQuery); 

演示：Fiddle

Answer 2

在methods.init功能this將通過quering選擇器獲得的jQuery對象。所以，如果你想發送給this只userDefinedMethod使用apply或call當你調用該函數：

... 
var methods = { 
    init : function(options, callbacks) { 
     $.fn.myPlugin.settings = $.extend({ 
     'userDefinedMethod': function() {} 
     }, options); 

     $.fn.myPlugin.settings.userDefinedMethod.call(this); 
     // or if you want to send the arguments 
     // $.fn.myPlugin.settings.userDefinedMethod.apply(this, arguments); 
     return this; 
    } 
} 
... 

而且，不要忘記，你沒有宣告methods使用var。 methods將成爲一個神奇的全局變量...

我也糾正了缺少)這是產生一個語法錯誤。

JSFIDDLE