Parece que no puedo encontrar cómo hacer esto correctamente.
const menu = document.querySelectorAll('.menu-item'); menu.forEach(item=>{ item.addEventListener('click', ()=>{ // now I need to select all menu items accept 'this' to remove 'is-active' class. document.querySelector(".menu-link").classList.remove("is-active"); // not working !this.classList.remove("is-active"); // not working this.classList.add("is-active"); // add active class to menu item }); });Sé que podría volver a recorrer todos los elementos, luego eliminar para cada elemento la clase y agregar por última vez para 'esto', pero creo que debería haber una manera de seleccionar todo menos esto.
Vuelva a iterar sobre todos los elementos del menú: ya está haciendo forEach para agregar los oyentes, así que vuelva a hacerlo dentro del oyente. Después de eso, haga referencia al item (el elemento que se está repitiendo) para agregar la clase. (Usar this no funcionará porque está usando una función de flecha).
const menuItems = document.querySelectorAll('.menu-item'); menuItems.forEach(item => { item.addEventListener('click', () => { menuItems.forEach(item => { item.classList.remove("is-active"); }); item.classList.add("is-active"); }); });O guardar el último activo en una variable
let lastActive; const menuItems = document.querySelectorAll('.menu-item'); menuItems.forEach(item => { item.addEventListener('click', () => { lastActive?.classList.remove("is-active"); item.classList.add("is-active"); lastActive = item; }); });Si realmente quieres ir por la ruta de la comparación, entonces
const menuItems = document.querySelectorAll('.menu-item'); menuItems.forEach(item => { item.addEventListener('click', () => { menuItems.forEach(innerItem => { if (innerItem !== item) { innerItem.classList.remove("is-active"); } }); item.classList.add("is-active"); }); }); o si debe usar this , no use una función de flecha.
const menuItems = document.querySelectorAll('.menu-item'); menuItems.forEach(item => { item.addEventListener('click', function() { menuItems.forEach(innerItem => { if (innerItem !== this) { innerItem.classList.remove("is-active"); } }); this.classList.add("is-active"); }); });