0
183
ViewsCómo hacer que el detector de eventos solo agregue un elemento CSS en un elemento a la vez (Vanilla JavaScript)
^ Me gustaría poder habilitar el estilo solo para uno a la vez.
^ Puedo hacer esto, lo cual no quiero que el usuario pueda hacer.
Por lo tanto, es extrañamente difícil formular una pregunta para lo que posiblemente sea una solución fácil. Básicamente, tengo una lista de versiones de compilación donde quiero que el usuario seleccione una. Cuando se selecciona una de las versiones, agrega un borde al elemento para mostrar que se ha hecho clic. Sin embargo, con mi código en este momento, el usuario puede seleccionar los 3 elementos y habilitar sus elementos CSS. Me gustaría que el usuario solo pueda "activar" un elemento de la lista.
HTML y CSS:
<ul class="listContents"> <li><p><a href="#" class="links">Stable</a></p></li> <li><p><a href="#" class="links">Preview</a></p></li> <li><p><a href="#" class="links">LTS</a></p></li> </ul> <style> .colorText { background-color: #58a7ed; color: white; } </style>y las cosas de JS:
const btn = document.querySelectorAll('.links'); for (let i = 0; i < btn.length; i++ ) { btn[i].addEventListener("click", function() { btn[i].classList.add('colorText') }) }Realmente espero haberme dejado claro, siento que estoy fallando en mi inglés tratando de decir esto correctamente jajaja.
3 answers
Answer question0
También puede usar un bucle forEach , accediendo al enlace en el que se hizo clic usando event.target
const btns = document.querySelectorAll('.links'); btns.forEach(btn => { btn.addEventListener('click', e => { // remove any existing active links btns.forEach(b => b.classList.remove('colorText')); // activate the clicked link e.target.classList.add('colorText'); }) }); .colorText { background-color: #58a7ed; color: white; } <ul class="listContents"> <li> <p><a href="#" class="links">Stable</a></p> </li> <li> <p><a href="#" class="links">Preview</a></p> </li> <li> <p><a href="#" class="links">LTS</a></p> </li> </ul>0
Justo antes de agregar la clase colorText al elemento deseado, podemos eliminar colorText de TODOS ellos, asegurándonos de que solo 1 a la vez obtenga la clase.
// the rest is the same... btn[i].addEventListener("click", function() { // remove it from all: btn.forEach(function(item) { item.classList.remove('colorText'); }); // add it back to the desired one btn[i].classList.add('colorText') })0
también puedes usar simple para de
const btn = document.querySelectorAll(".links"); for (let bt of btn) { bt.addEventListener("click", (e) => { btn.forEach((b) => b.classList.remove("colorText")); e.target.classList.add("colorText"); }); }