函数没有在 javascript 中被调用。由 WebPack 打包

Question

我正面临 JS 函数的问题。我可以打开搜索栏，但是当我尝试关闭它时。代码没有被触发（我的第一个事件被调用但之后的任何事情都没有被调用/触发）我正在使用 WebPack，它将 javascript 捆绑到一个 bundle.js 文件中编码html文件<div class="search-overlay">    <div class="search-overlay__top">      <div class="container">          <i class="fa fa-search search-overlay__icon" aria-hidden="true"></i>          <input type="text" name="" class="search-term " id="" placeholder="What are you looking for">          <i class="fa fa-window-close search-overlay__icon" aria-hidden="true"></i>      </div>    </div>  </div>js文件import $ from 'jquery';class Search {   constructor() {        this.openScreen = $(".js-search-trigger");         this.closeScreen = $(".search__close");         this.searchOverlay = $(".search-overlay");         this.events();    }    // 2. Events    events() {        this.openScreen.on("click", this.openOverlay.bind(this));        this.closeScreen.on("click", this.closeOverlay.bind(this));    }     // 3. Methods     openOverlay() {         this.searchOverlay.addClass("search-overlay--active");         $("body").addClass("body-no-scroll");    }    closeOverlay(){        this.searchOverlay.removeClass("search-overlay--active");        $("body").removeClass("body-no-scroll");    }  }export default Search

Answer 1

在您的代码上，错误是时间，可能是您这样做太快了。

我的意思是，当你打电话关闭覆盖时，我可能还没有上课。

另一种理论是你有不止一个.search-overlay关于尖叫的函数，并且该removeClass函数试图从另一个元素中删除一个类。

尝试在控制台上执行选择器以查看您使用此选择器选择了多少元素。然后，也尝试在控制台上逐步执行您的代码。