querySelectorAll用于多個物件

我有這個代碼，我需要更改 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>

uj5u.com熱心網友回復：

.querySelectorAll()給你一個元素串列。你需要迭代它。

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

for (let navigation of navigationItems) {
  navigation.addEventListener('click', 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>

uj5u.com熱心網友回復：

使用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>

標籤：

上一篇：如何讓我的影像精靈坐在一起？

下一篇：在特定時間暫停影片并恢復