¿Cómo puedo usar javascript para alternar una clase?
Intenté colorear el texto en el que se hizo clic dándole al elemento una clase, y eso funciona (el texto se vuelve rojo).
Pero cuando hago clic en el mismo elemento dos veces, la clase no se elimina. Utilicé la clase de alternancia para esto, pero parece que no funciona.
const txts = document.querySelectorAll('.txt'); const txtColor = (txt) => { txt.addEventListener('click', e => { if (e.target.classList.contains('txt')) { txts.forEach(txt => txt.classList.remove('red')); e.target.classList.toggle('red'); } }); } txtColor(document.querySelector('ul')); <ul> <li class="txt">Lorem ipsum dolor.</li> <li class="txt">Lorem ipsum dolor.</li> <li class="txt">Lorem ipsum dolor.</li> </ul>Realmente no necesitas la función textColor(), así que eliminémosla. Entonces, podría ser más fácil componer su lógica si mueve la función de alternar a su propia función.
Un lugar para tener cuidado es cuando alterna las clases. En su código original, no puede activar/desactivar/activar/desactivar el mismo LI.
Este es el por qué:
Primero, el código elimina la clase roja de todos los LI (una buena estrategia), pero luego, se usa toggle para alternar la clase del LI en el que se hizo clic.
Piense en eso... Si el LI ya está rojo, entonces elimina la clase de todos los LI (ahora ninguno de ellos es rojo), luego cambia el LI que ya estaba rojo, se volverá rojo nuevamente, y parece no pasó nada. Pero se puso rojo -> nada -> rojo muy, muy rápido . Demasiado rápido para verlo suceder.
Por lo tanto, primero puede verificar si el LI ya tiene la clase roja y solo cambiarlo si aún no tenía esa clase.
Esta estructura te puede ayudar a verlo mejor.
const txts = document.querySelectorAll('.txt'); txts.forEach((txt) => { txt.addEventListener('click', (e) => toggleColor(e)); }); function toggleColor(e){ const doRed = e.target.classList.contains('red'); txts.forEach(txt => txt.classList.remove('red')); if (!doRed) e.target.classList.toggle('red'); } .red{ color: red; } li{ user-select: none; } <ul> <li class="txt">Lorem ipsum dolor.</li> <li class="txt">Lorem ipsum dolor.</li> <li class="txt">Lorem ipsum dolor.</li> </ul>