javascript - 如何在 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