Question

为什么该 JS 代码对页面上除第一个类之外的任何内容都不起作用？

2022-09-10

34

javascript queryselector

以下 JS 代码可打开/关闭站内搜索，但页面上有 2 个位置有一个 .search-button 按钮，第一个按钮可用，但第二个按钮不可用。如果我添加更多按钮，它们也不起作用。我可以让此代码在页面上所有包含 .search-button 的类上运行吗？

var wHeight = window.innerHeight;
var sb = document.querySelector(".search-button");
var closeSB = document.querySelector(".search-close");
var SearchOverlay = document.body;
var searchBar = document.querySelector(".search-bar");
// Show
searchBar.style.top=wHeight/2 +'px';
    console.log(wHeight);
    window.addEventListener("resize", function() {
        console.log(wHeight);
        wHeight = window.innerHeight;
        searchBar.style.top=wHeight/2 + 'px';
    }, true);
document.addEventListener("click", function() {
    sb.onclick = function() {
    console.log("Opened Search for Element: ");
    SearchOverlay.classList.add("show-search");
};
// Hide
closeSB.onclick = function() {
    console.log("Closed Search for Element: " + closeSB);
    SearchOverlay.classList.remove("show-search");
    };
}, true);

Answer 1

这是因为您使用了 document.querySelector() ，它返回与您的查询匹配的第一个元素。有关更多详细信息，请查看 https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector 。

要查询具有相同类的所有元素，您需要使用 document.querySelectorAll() ，它将所有匹配的元素作为数组返回。然后，您可以使用数组 forEach() 函数遍历所有元素并为所有元素添加事件函数。

var sb = document.querySelectorAll(".search-button");

sb.forEach(el => el.onclick = function(e) {
    console.log("Opened Search for Element: ");
    SearchOverlay.classList.add("show-search");
});

更新：您还可以简化您的