Question

我无法通过document.querySelectorAll通过返回结果中每个项目的循环为元素分配事件处理程序。我不知道自己做错了什么。它看起来像这样：

// divs to show/hide
const mobileNavOpen = document.querySelector(".mobile-nav-open");
const mobileNavClose = document.querySelector(".mobile-nav-close");

// mobile menu/search overlay
const mobileNavItems = document.getElementById("global-nav--mobile");
const searchOverlay = document.getElementById("search-overlay");

// search unit open/close buttons

// this line I think is broken
const navSearch = document.querySelectorAll(".global-nav__search-icon");

// this one doesn't work either
const navSearch = document.getElementsByClassName("global-nav__search-icon");

const searchCloseButton = document.querySelector(".search-overlay__close");


function mobileOpen(event) {
  event.preventDefault();
  mobileNavItems.classList.add("show");
}

function mobileClose(event) {
  event.preventDefault();
  mobileNavItems.classList.remove("show");
}

function searchOpen(event) {
  event.preventDefault();
  searchOverlay.classList.add("show");
}

function searchClose(event) {
  event.preventDefault();
  searchOverlay.classList.remove("show");
}

mobileNavOpen.addEventListener("click", mobileOpen);
mobileNavClose.addEventListener("click", mobileClose);

for (var i = 0; i < navSearch.length; i++) {
  navSearch.addEventListener("click", searchOpen);
}

searchCloseButton.addEventListener("click", searchClose);

标记：

<nav id="global-nav">
    <a href="#" class="mobile-nav-open">+</a>
    <a class="global-nav__logo" href="/"><img src="/images/logo.png" alt=""></a>
    <img class="global-nav__search-icon mobile-search" src="images/search-icon.png" alt="" style="height: 32px;">
    <ul class="global-nav__items">
      <li><a href="/item1">item 1</a></li>
      <li><a href="/item2">item 2</a></li>
      <li> <a href="#">item 3</a> </li>
      <li> <a href="#">item 4</a> </li>
    </ul>
    <ul class="global-nav__items" id="login-signup">
      <li class="global-nav__search-icon"><img src="images/search-icon.png" alt=""></li>
      <li><a href="#">Log In</a></li>
      <li><a href="#">Sign Up</a></li>
    </ul>
</nav>

我找到了这个答案：JS error object has no method addEventListener并且我正在实施这个例子，但我仍然遇到问题。

这应该很简单，我做错了什么？

Answer 1

您错过了循环中的索引（[i]）

for (var i = 0; i < navSearch.length; i++) {
    navSearch[i].addEventListener("click", searchOpen);
}

注意：querySelectorAll和getElementsByClassName都应该这样做。它们分别返回一个NodeList或一个HTMLCollection，但它们都像你一样支持简单的for循环。

document.querySelectorAll和document.getElementsByClassName事件处理

1 个答案: