Tengo un botón de alternancia muy simple que agrega y elimina una clase a un <div> . Así es como se ve:
// 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> La clase .toggled se agrega a .header y .another .another-class .
¿Hay alguna manera de apuntar a varias clases en lugar de escribir variables separadas como las que tengo en mi ejemplo? He intentado:
var toggle = document.querySelector('.header, .another-class');Sí, pero implica un bucle. Puede usar querySelectorAll y luego llamar a .classList.toggle en cada elemento de la lista resultante:
function toggleMe() { const list = document.querySelectorAll('.header, .another-class'); for (const element of list) { element.classList.toggle('toggled'); } }Ejemplo:
// 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> En su ejemplo específico , podría poner la clase conmutada en un contenedor que tiene ambos elementos ( document.body si no hay nada más específico que eso), pero supongo que tiene razones para no querer hacer eso . En cualquier caso, he aquí un ejemplo:
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>Use Document.querySelectorAll() que permite CSS como selector y recorrerlos para alternar la clase en el elemento actual:
// Menu Toggle function toggleMe() { // Header, Another Class var toggleEl = document.querySelectorAll('.header, .another-class'); toggleEl.forEach(el => el.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>