未捕获TypeError:无法读取未定义且具有生命周期的属性“”defaultView“”

Question

我正在学习jQuery第四版(PacktPub发布)，尝试其中一个练习，我必须创建名为.slideFadeIn()和.slideFadeOut()的新插件方法，将.fadeIn()和.fadeOut()的不透明度动画与.slideDown()和.slideUp()的高度动画结合起来。

这是我当前的代码

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

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

然而，当我单击<h1>时，我得到了错误消息，

Uncaught TypeError: Cannot read property 'defaultView' of undefined

我也试过

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

查看错误是否是因为$(this)引用了不同的上下文，但我仍然收到相同的错误

Uncaught TypeError: Cannot read property 'defaultView' of undefined 

编辑:我已经尝试编辑代码以

$('h1').fadeOut().slideUp();

它可以工作，所以问题出在$(this)上，我就是看不出$(this)到底有什么问题

有人能指出我的错误吗？

谢谢!

Answer 1

你创建插件的方式和我的略有不同，因为"this“是"fn.slides”的作用域“this”--因此，它会出错。我能够通过传递您想要的"this“的上下文来解决您的问题--这是使用”h1“的”call“。使用" call“(和”apply“)，我可以调用函数并传入我想要的”this“上下文。

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

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