将此上下文传递给插件

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);
});

有没有其他方法可以正确地将this上下文传递给slideOut()，或者以任何方式构建我的插件，使我可以通过

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

?

Thanks!

- Kenneth .J

Answer 1

我理解您可能不想通过将两个函数附加到单个slides成员来污染jquery名称空间，但我认为创建两个单独的插件可以更好地为受众服务。

此外，您的插件需要返回$(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();
});

- Faust

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/

- dfsq

---

这行代码 methods[method].call(this) 是做什么的？方括号中的 method 具体是做什么的？另外，为什么 .call(this) 能够工作？上下文不应该是对象的上下文（即与我上面的代码相同的问题），而不是 $('h1') 吗？ - Kenneth .J

object["property"]和object.property是一样的。因此，如果您在上面的示例中调用slides('slideOut')，它将调用methods.slideOut。.call(this)将调用.slideOut并将this设置为当前上下文，而不是将this设置为methods。 - Josef Engelfrost

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/

- Neel

Answer 4

我尝试按照你上面提到的做法去做，但最终只能查看其他链接。 似乎对于插件，我们需要首先定义特定的函数以便最佳实践。如果我们试图原型化该函数，则如下：

myplugin.prototype.newfn =  function (){

}

然后我们需要首先执行myplugin函数。有关最佳实践所需的所有详细信息都在以下答案中：

如何创建具有方法的jQuery插件？

这是有用的插件boilerpalates链接： 插件的锅炉板

当然，这里还有您工作插件的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");
});

上滑下滑 jsfiddle

- surajRahel

---

哈哈，我新来 StackOverflow 来回答问题。但是我对 jQuery 非常熟悉，所以需要反复编辑才能表达出正确的答案。 - surajRahel