javascript - 使用 classList.toggle 定位多个类

Question

我有一个非常简单的切换按钮，可以在 <div> 中添加和删除类。 .这是它的样子:

// Menu Toggle
function toggleMe() {
    
    // Header
    var toggleOne = document.querySelector('.header');
    toggleOne.classList.toggle('toggled');
    
    // Another Class
    var toggleTwo = document.querySelector('.another-class');
    toggleTwo.classList.toggle('toggled'); 
    
}

p {
  display: none;
}

.toggled p {
  display: block;
}

<button onclick="toggleMe()">Toggle Me</button>

<div class="header">
  <p>.toggled class has been added!</p>
</div>

<div class="another-class">
  <p>.toggled class has been added!</p>
</div>

.toggled类正在添加到 .header和 .another-class .

有没有一种方法可以针对多个类，而不是像我在示例中那样编写单独的变量？我试过:

var toggle = document.querySelector('.header, .another-class');

Answer 1

是的，但它涉及一个循环。您可以使用 querySelectorAll，然后对结果列表中的每个元素调用 .classList.toggle:

function toggleMe() {
    const list = document.querySelectorAll('.header, .another-class');
    for (const element of list) {
        element.classList.toggle('toggled');
    }
}

例子:

// Menu Toggle
function toggleMe() {
    const list = document.querySelectorAll('.header, .another-class');
    for (const element of list) {
        element.classList.toggle('toggled');
    }
}

p {
  display: none;
}

.toggled p {
  display: block;
}

<button onclick="toggleMe()">Toggle Me</button>

<div class="header">
  <p>.toggled class has been added!</p>
</div>

<div class="another-class">
  <p>.toggled class has been added!</p>
</div>

在您的特定示例中，您可以将切换类放在包含这两个元素的容器上(document.body 如果没有什么比那个)，但我猜你有理由不想这样做。无论如何，这里有一个例子:

function toggleMe() {
    document.body.classList.toggle("toggled");
}

// Menu Toggle
function toggleMe() {
    document.body.classList.toggle("toggled");
}

p {
  display: none;
}

.toggled p {
  display: block;
}

<button onclick="toggleMe()">Toggle Me</button>

<div class="header">
  <p>.toggled class has been added!</p>
</div>

<div class="another-class">
  <p>.toggled class has been added!</p>
</div>