javascript – 将此上下文传递给插件

前端之家收集整理的这篇文章主要介绍了javascript – 将此上下文传递给插件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我如何将$(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();
    });

谢谢!

最佳答案
像这样的东西看起来更像是一个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/

猜你在找的jQuery相关文章