function 未在 javascript 中調用。 由 WebPack 捆綁

Question

我遇到了 JS function 的問題。 我可以打開搜索欄，但是當我嘗試關閉它時。 代碼沒有被觸發（我的第一個事件被調用，但之后的任何事情都沒有被調用/觸發）

我正在使用 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

在您的代碼上，錯誤是時間，可能您這樣做是為了快速。

我的意思是，當您調用關閉覆蓋時，我可能還沒有 class。

另一種理論是，您在尖叫聲上有多個 .search .search-overlay並且removeClass function 試圖從另一個元素中刪除 class 。

嘗試在控制台上執行選擇器以查看使用此選擇器 select 有多少元素。 然后，嘗試在控制台上逐步執行您的代碼。