外部函数未正确传递给 IIFE -

Question

相当菜鸟的问题。

我有一个事件侦听器函数，我正在执行一些 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 函数将从 jQuery 获取正确的 this 对象，并且您的选择器将正常工作。