javascript - 未捕获的类型错误 : Cannot read property 'defaultView' of undefined with a IIFE

Question

我正在学习 jQuery 第 4 版(PacktPub 发布)，尝试其中一项练习，我必须创建新的插件方法，称为 .slideFadeIn() 和 .slideFadeOut()，结合 .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”的上下文来解决你的问题——这是通过使用“call”的“h1”。通过“调用”(和“应用”)，我可以调用该函数并传入我想要的“this”上下文。

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

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