Question

我正在学习jQuery第4版（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

您创建插件的方式与我的方式略有不同，因为＆＃34;这个＆＃34;是＆＃34; fn.slides＆＃34;范围＆＃39;这个＆＃39; - 因此，它出错了。我能够通过传递＆＃34;这个＆＃34;的上下文来解决你的问题。你想要的 - 这是＆＃39; h1＆＃39;通过使用＆＃39; call＆＃39;。随着＆＃34;呼叫＆＃34; （和＃34;申请），我可以调用该函数并传入＆＃39; this＆＃39;我想要的上下文。

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

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

未捕获的TypeError：无法读取属性＆＃39; defaultView＆＃39;未定义的IIFE

1 个答案: