Question

我如何将$（this）的上下文传递给插件？

目前，我有一个插件（代码如下所示）

(function($) {
  $.fn.slides={
    slideIn:function(){
      $(this).fadeIn().slideDown();
    },
    slideOut:function(){
      $(this).fadeOut().slideUp();
    }
  }
})(jQuery);

通过

调用插件

$('h1').click(function(){
  $(this).slides.slideOut();
});

我收到错误

Uncaught TypeError: Cannot read property 'defaultView' of undefined

因为这个上下文没有正确传递给插件的slideOut（）方法。即slideOut这个上下文是$ .fn.slides对象的上下文。

除了使用.call（）传递上下文，即

$('h1').click(function(){
  $(this).slides.slideOut.call(this);
});

有没有其他方法可以正确地将此上下文传递给slideOut（），或者无论如何构造我的插件，以便我可以通过

调用方法slideOut（）

 $('h1').click(function(){
      $(this).slides.slideOut();
    });

谢谢！

Answer 1

我知道您可能不希望通过将两个函数附加到单个slides成员来对jquery名称空间进行轮询，但我认为您最好通过创建2个单独的插件来为观众服务。

此外，您的插件需要返回$（this），以便它们可以链接：

$.fn.slideIn = function(){

    var $this = $(this);
    $this.fadeIn().slideDown();
    return $this 
};

$.fn.slideOut = function(){

    var $this = $(this);
    $this.fadeOut().slideUp();
    return $this 
}

然后（例如）：

$('h1').click(function(){
    $(this).slideOut();
});

Answer 2

这样的东西看起来更像是一个jQuery插件：

(function ($) {
    $.fn.slides = function(method) {

        var methods = {
            slideIn: function () {
                $(this).fadeIn().slideDown();
            },
            slideOut: function () {
                $(this).fadeOut().slideUp();
            }
        };

        return this.each(function() {
            methods[method].call(this);
        });
    };
})(jQuery);

用法：

$('h1').click(function() {
    $(this).slides('slideOut');
});

另请注意，jQuery插件应该返回一个jQuery实例集合，以实现可链接。

演示：http://jsfiddle.net/cC8fF/

Answer 3

您可以执行以下代码并查看演示： -

(function($) {
  $.fn.slides={
    slideIn:function(){
      $(this).fadeIn().slideDown();
    },
    slideOut:function(result){
        alert(result);
      result.fadeOut().slideUp();
    }
  }
})(jQuery);

$('h1').on("click", function(){
    alert($(this));
  $(this).slides.slideOut($(this));
});

演示： -

http://jsfiddle.net/avmCX/32/

Answer 4

我试着像你上面提到的那样做，最后检查其他链接。对于插件而言，我们需要首先定义特定的功能以获得最佳实践。如果我们尝试原型化该功能，如

myplugin.prototype.newfn =  function (){

}

然后我们需要先执行myplugin函数。最佳实践所需的所有细节如下：

How to create a jQuery plugin with methods?

以下是有用的插件套件的链接： Boilerplates for plugin

和ofcourse jsfiddle为你的工作插件：

 var methods = {
    slideIn:function(){

        this.fadeIn().slideDown();
        return this;
    },
    slideOut:function(){

        this.fadeOut().slideUp();
        return this;
    },
    init: function() {
        // or you can do more functions here
        return this;
    }
};

$.fn.slides = function(methodOrOptions) {

    if ( methods[methodOrOptions] ) {
        return methods[ methodOrOptions ].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof methodOrOptions === 'object' || ! methodOrOptions ) {
        // Default to "init"
        return methods.init.apply( this, arguments );
    } else {
        $.error( 'Method ' +  methodOrOptions + ' does not exist on jQuery.slides' );
    }    
};

你可以这样称呼它：

 $('h1').click(function(){
  $(this).slides("slideOut");
});

slide up slide down jsfiddle

将此上下文传递给插件

4 个答案:

演示：http://jsfiddle.net/cC8fF/