如何使函数变量像jquery插件一样被调用?

时间:2012-01-22 23:32:15

标签: javascript jquery jquery-plugins

插件:

(function( $ ){

  $.fn.myplugin = function( options ) {  

    var mymethod = function(){
      // I want to be able to access "this" here ('.element')

      return this; 
    };

    return this.each(function() {        
      // $('.element', this).mymethod(); <- how to do this?
    });

  };
})( jQuery );

我想这样称呼我的方法:

$('.element').mymethod();

这可能吗?

基本上它需要保持链接,所以我可以进一步调用其他函数......

5 个答案:

答案 0 :(得分:2)

如果你想把它称为jQuery插件,你将无法将它添加到jQuery原型($ .fn)。但是如果你只想让 this 引用你的选择器的jQuery元素,你可以使用apply

(function( $ ){

  $.fn.myplugin = function( options ) {  

    var mymethod = function(){
      // I want to be able to access "this" here ('.element')

      return this; 
    };

    return this.each(function() {        
      mymethod.apply($('.element', this));
    });

  };
})( jQuery );

答案 1 :(得分:2)

关闭,只要有新的this关键字,您就会丢失function关键字。首先尝试保存它:

(function( $ ){

  $.fn.myplugin = function( options ) {  

    var that = this;

    var mymethod = function(_this, dotElem){
      // I want to be able to access "this" here ('.element')
        that.hide().blah()...

      return this; // this isn't needed as we are going to anyway return `this.each()`
    };

    return this.each(function() {        
        mymethod(this, $('.element' )); <- how to do this?
    });

  };
})( jQuery );

答案 2 :(得分:2)

如果您还没有这样做,我强烈建议您查看jQuery插件创作页面。 http://docs.jquery.com/Plugins/Authoring

调用特定方法的最佳方法是转到

$( '#foo' ).myPlugin( 'myMethod' );

你实现这样的方式就像这样,(注意:全部来自jQuery插件创作网站)

( function ( $ ) {

    var methods = {
        init : function( options ) {

            // Init function here

        },
        destroy : function( ) {

            // Teardown function here

        }
    };

    $.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 exist on jQuery.myPlugin' );
}    


};

})( jQuery );

答案 3 :(得分:1)

改变MyMethod,使其直接扩展

$.fn.mymethod = function() {
   this.hide(); // the .element
   return this; // continue the daisy chain
}

// example usage
$(document).ready(function() {
   $("div").mymethod();
});

更新了x2(有错字)!

http://jsfiddle.net/MattLo/2TWMV/1/

答案 4 :(得分:1)

那么,你就是这样做的:

$.fn.mymethod = function () { ...   return this; }

jQuery会自动将其调用的元素传递为this

但以这种方式添加大量功能被认为是不好的做法。这就是为什么大多数插件只是向$.fn添加一个函数并采用字符串参数来调用哪个方法。