querySelectorAll 用于多个对象答案

【问题标题】：querySelectorAll for multiple objectsquerySelectorAll 用于多个对象
【发布时间】：2022-01-15 08:45:44
【问题描述】：

我有这个代码，我需要更改 JS 代码以在所有导航类名称上使用它。目的是创建一个下拉菜单，但 javascript 代码仅采用具有类名导航的第一个元素。

在查询时我发现我们需要使用 querySellectorAll 但我无法让它工作。

我在下面为您提供仅适用于一个对象的代码，希望有人能够向我展示如何将其用于具有类名导航的所有对象。感谢您的帮助。

let navigation = document.querySelector('.navigation');

navigation.onclick = function() {
  navigation.classList.toggle('active')
}

.active {
  color: blue;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<div class="navigation">
  <ul>
    <span><i class="fa-regular fa-pen-to-square"></i></span>
    <span><i class="fa-regular fa-heart"></i></span>
    <span><i class="fa-regular fa-trash-can"></i></span>

    <div id="marker"></div>
  </ul>
</div>
<div class="navigation">
  <ul>
    <span><i class="fa-regular fa-pen-to-square"></i></span>
    <span><i class="fa-regular fa-heart"></i></span>
    <span><i class="fa-regular fa-trash-can"></i></span>

    <div id="marker"></div>
  </ul>
</div>
<div class="navigation">
  <ul>
    <span><i class="fa-regular fa-pen-to-square"></i></span>
    <span><i class="fa-regular fa-heart"></i></span>
    <span><i class="fa-regular fa-trash-can"></i></span>

    <div id="marker"></div>
  </ul>
</div>

【问题讨论】：

"...但我无法让它工作" -> 请使用minimal reproducible example 将这个“给我解决方案”请求变成一个实际问题-> How do I ask a good question?

标签： javascript css dom

【解决方案1】：

使用querySelectorAll 而不是querySelector

let navigation = document.querySelectorAll('.navigation');

navigation.forEach(e=>{
e.onclick = function() {
  e.classList.toggle('active')
}
});

.active {
  color: blue;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<div class="navigation">
  <ul>
    <span><i class="fa-regular fa-pen-to-square"></i></span>
    <span><i class="fa-regular fa-heart"></i></span>
    <span><i class="fa-regular fa-trash-can"></i></span>

    <div id="marker"></div>
  </ul>
</div>
<div class="navigation">
  <ul>
    <span><i class="fa-regular fa-pen-to-square"></i></span>
    <span><i class="fa-regular fa-heart"></i></span>
    <span><i class="fa-regular fa-trash-can"></i></span>

    <div id="marker"></div>
  </ul>
</div>
<div class="navigation">
  <ul>
    <span><i class="fa-regular fa-pen-to-square"></i></span>
    <span><i class="fa-regular fa-heart"></i></span>
    <span><i class="fa-regular fa-trash-can"></i></span>

    <div id="marker"></div>
  </ul>
</div>

【讨论】：