Question

漂亮的noob问题。

我有一个事件监听器函数，我正在做一些DOM操作。它看起来像这样：

(function(){
  $('.js-service-more-close').on('click', function() {
    var self = $(this);
    var service = self.closest('.service-more').prev('.service');
    var figures = self.closest('.service-more-inner-bar').next('.service-more-inner').find('figure');
    self.closest('.service-more').removeClass('service-more--is-expanded').css('max-height', 0);
    service.removeClass('service--is-active');
    figures.removeClass('fade-in');
  });
 })();

工作正常。

我以为我会将操作提取到另一个函数中，以便我可以在其他地方重用它们。我现在有这个。

var closeItUp = function() {
  var self = $(this);
  var service = self.closest('.service-more').prev('.service');
  var figures = self.closest('.service-more-inner-bar').next('.service-more-inner').find('figure');
  self.closest('.service-more').removeClass('service-more--is-expanded').css('max-height', 0);
  service.removeClass('service--is-active');
  figures.removeClass('fade-in');
};

(function(){
  $('.js-service-more-close').on('click', function() {
    closeItUp();
  });
})();

这不起作用，我不知道为什么。没有明显的控制台错误。

有人能指出我正确的方向吗？

Answer 1

问题是this不是您期望的那个，当您在另一个闭包中移动该函数时丢失了它（在这种情况下为window）。像这样传播：

(function(){
  $('.js-service-more-close').on('click', function() {
    closeItUp.call(this);
  });
})();

...或者，甚至更好：

(function(){
  $('.js-service-more-close').on('click', closeItUp);
})();

这样，closeItUp函数将从this获取正确的jQuery对象，您的选择器才能正常工作。

外部功能未正确传递给IIFE -

1 个答案: