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

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

我的意思是，当您调用close de overlay时，我可能还没有上课。

另一种理论是，您对尖叫有多个.search-overlay，而removeClass函数正试图从另一个元素中删除一个类。

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

函数未在javascript中调用。由WebPack捆绑

1 个答案: