jquery - 自定义 jQuery 方法创建

Question

我想创建一个可以在 jQuery 对象上运行的函数或方法。见jsfiddle。

$(function() {

    $("#myElem").click(function(){ 
        $(this).myMethod("red");       
    });

    var myMethod = function(myParam){
        var buttonBorder = "2px solid " + myParam;
        $(this).css("border", buttonBorder);
    };

});

第一个问题是该方法没有按我的预期工作。我收到此错误：

Uncaught TypeError: Object [object Object] has no method 'myMethod'

第二个问题（可能是由第一个问题引起的？）是$(this)inmyMethod与$(this)事件处理程序中的不同。该方法有没有办法在不显式将其作为参数传递的情况下获取对象？

Answer 1

如果要创建插件，则必须将其添加到jQuery.fn：

$.fn.myMethod = function(myParam){
    var buttonBorder = "2px solid " + myParam;
    $(this).css("border", buttonBorder);
};

现在您可以按照您想要的方式调用它，并且this还将引用正确的上下文。请参阅更新的小提琴。

Answer 2

如果你想坚持使用函数，你可以分配多个参数：

小提琴

• 想要的元素
• 使用的颜色

 function myMethod(el, color){
    $(el).on('click',function(){
        this.css("border", "2px solid " + color);
    });
 }   
   
 myMethod("#myElem", "red");

但我建议你创建一个插件。

插件版本

(function( $ ) {
  $.fn.myMethod = function( arg ) {
      this.on('click',function(){
          $(this).css({border:'2px solid '+ arg });
      });
  };
})( jQuery );

$("#myElem").myMethod('blue');

或者如果您愿意，可以这样：

(function( $ ) {
    $.fn.myMethod = function( arg ) {
          this.css({border:'2px solid '+ arg });
    };
})( jQuery );
    
        
$("#myElem").on('click',function(){
    $(this).myMethod('blue');
});
    
    

Answer 3

你 $.fn 什么？

您不能像这样将某些东西修补到 jQuery 中，您需要使用 fn 方法，此处详细介绍：

http://docs.jquery.com/Plugins/Authoring