Tengo una lista con 5 elementos de la misma clase: "navbar_item". Con este código, alterno el estado 'activo' al hacer clic en el elemento con la clase mencionada, pero solo alterna el primer elemento de la lista. ¿Qué hago para cambiarlos todos?
const menu = document.querySelector('#mobile-menu'); const menuMenu = document.querySelector('.navbar_menu'); const menuItem = document.querySelector('.navbar_item'); const mobileMenu = () => { menu.classList.toggle('is-active'); menuMenu.classList.toggle('active'); menuItem.classList.toggle('active'); }; menu.addEventListener('click', mobileMenu); menuItem.addEventListener('click', mobileMenu);Debe usar querySelectorAll para obtener todos los elementos. Esto proporciona una lista que puede iterar o recorrer para aplicar eventListeners y alternar clases.
Algo como esto
const menuItem = document.querySelectorAll('.navbar_item'); const mobileMenu = () => { menuItem.forEach( (item) => { item.classList.toggle('active'); }) }; menuItem.forEach( (item)=> { item.addEventListener('click', mobileMenu) }) .active{ background-color: lightblue; } .navbar_item{ margin-bottom: 10px; } <div class="navbar_menu"> <div class="navbar_item">Item 1</div> <div class="navbar_item">Item 2</div> <div class="navbar_item">Item 3</div> <div class="navbar_item">Item 4</div> <div class="navbar_item">Item 5</div> </div>porque "querySelector" solo obtendrá el primer elemento, si desea obtener Todo; utilice "querySelectorAll"; también puede aprender la delegación de eventos para obtener una mejor manera de resolver este problema
const menu = document.querySelector('#mobile-menu'); const menuMenu = document.querySelector('.navbar_menu'); const menuItems = document.querySelectorAll('.navbar_item'); const mobileMenu = () => { menu.classList.toggle('is-active'); menuMenu.classList.toggle('active'); }; menu.addEventListener('click', mobileMenu); for(let i = 0; i < menuItems.length; i ++) { menuItems[i].addEventListener('click', () => { menuItem[i].classList.toggle('active'); }); }