javascript - 无法在 javascript 中显示叠加层，但可以在 jquery 中显示

Question

我希望在单击搜索图标时显示叠加层。

我设法使用 jQuery 让它工作。但似乎无法让它与 JavaScript 一起工作。

点击事件似乎没有注册，我不知道为什么。

我已经检查了所有类名，以便它们在 HTML 和 javascript 中都匹配

这是有效的 jQuery 代码:

import $ from 'jquery';

class Search {
  constructor() {
    this.openButton = $('.js-search-trigger');
    this.closeButton = $('.search-overlay__close');
    this.searchOverlay = $(".search-overlay");
    this.events();
  }

  events() {
    this.openButton.on('click', this.openOverlay.bind(this));
    this.closeButton.on('click', this.closeOverlay.bind(this));
  }

  openOverlay() {
    this.searchOverlay.addClass("search-overlay--active");
  }

  closeOverlay() {
    this.searchOverlay.removeClass("search-overlay--active");
  }
}

export default Search;

这是不起作用的 JavaScript 代码:

class Search {
  constructor() {
    this.openButton = document.querySelector('.js-search-trigger');
    this.closeButton = document.querySelector('.search-overlay__close');
    this.searchOverlay = document.querySelector('.search-overlay');
    this.events();
  }

  events() {
    this.openButton.addEventListener('click', function() {
      this.openOverlay.bind(this);
    });

    this.closeButton.addEventListener('click', function() {
      this.closeOverlay.bind(this);
    });
  }

  openOverlay() {
    this.searchOverlay.classList.add('search-overlay--active');
  }

  closeOverlay() {
    this.searchOverlay.classList.remove('search-overlay--active');
  }
}

export default Search;

JavaScript 中未显示叠加层未显示的错误。

Answer 1

您可能需要更改事件监听器以使用正确的 this 绑定(bind):

this.openButton.addEventListener("click", this.openOverlay.bind(this));

或者使用箭头函数来配合您的方法 - 但请确保您实际上调用结果函数，就像在上面的方法中一样，函数作为引用传递并被调用。如果您从下面的代码中删除了额外的 () ，则与通常在代码中编写函数相同 - 它将被定义，但不会发生任何事情。

this.openButton.addEventListener("click", () => {
  this.openOverlay.bind(this)();
});

jQuery 还使用元素集合而不是单个元素，因此如果您有多个元素，则可能需要使用 querySelectorAll 和 forEach。