我希望在单击搜索图标时显示叠加层。
我设法使用 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 中未显示叠加层未显示的错误。
最佳答案
您可能需要更改事件监听器以使用正确的 this
绑定(bind):
this.openButton.addEventListener("click", this.openOverlay.bind(this));
或者使用箭头函数来配合您的方法 - 但请确保您实际上调用结果函数,就像在上面的方法中一样,函数作为引用传递并被调用。如果您从下面的代码中删除了额外的 ()
,则与通常在代码中编写函数相同 - 它将被定义,但不会发生任何事情。
this.openButton.addEventListener("click", () => {
this.openOverlay.bind(this)();
});
jQuery 还使用元素集合而不是单个元素,因此如果您有多个元素,则可能需要使用 querySelectorAll
和 forEach
。
关于javascript - 无法在 javascript 中显示叠加层,但可以在 jquery 中显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57338804/