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

我正面临 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


Cats萌萌
浏览 71回答 1
1回答

喵喵时光机

在您的代码上,错误是时间,可能是您这样做太快了。我的意思是,当你打电话关闭覆盖时,我可能还没有上课。另一种理论是你有不止一个.search-overlay关于尖叫的函数,并且该removeClass函数试图从另一个元素中删除一个类。尝试在控制台上执行选择器以查看您使用此选择器选择了多少元素。然后,也尝试在控制台上逐步执行您的代码。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript