0
115
ViewsAgregar clickeventlistener a todos los niños de una clase en particular usando addEventListener
Estoy haciendo una tarjeta como esta: 
El comportamiento esperado es que cuando hago clic en cualquiera de los círculos de calificación, su color debería cambiar a gris para el cual tengo una clase definida en mi css que alterno usando el código js.
El codepen para mi solución es este . Usando el código js que he escrito, cada vez que hago clic en cualquiera de las calificaciones, la última se vuelve gris todo el tiempo.
Este es mi código actual:
// getting the objects const submitBtn = document.querySelector('button'); const ratingsParent = document.querySelector('.ratings'); console.log(ratingsParent.children); // sanity check submitBtn.addEventListener('click', () => { console.log('Clicked'); }) for (var r of ratingsParent.children) { r.addEventListener('click', ()=> { r.classList.toggle('clicked'); }) } Pero cuando cambio r.ClassList.toggle a evt.target.ClassList.toggle , muestra el comportamiento esperado. Soy extremadamente nuevo en JS y estoy empezando a aprender a desarrollar frontend, por lo que no puedo averiguar el motivo de este comportamiento.
1 answers
Answer question0
var tiene un comportamiento diferente al de let y const cuando se declara en un encabezado de ciclo: solo crea una única variable para todo el ciclo, que comparten todos los cierres. Claramente tiene soporte para let y const , por lo que literalmente nunca debe usar var . (¿Tal vez hay una regla de pelusa que puede habilitar?)
for (const r of ratingsParent.children) { r.addEventListener('click', ()=> { r.classList.toggle('clicked'); }); }También existe la opción de adjuntar un único oyente al elemento principal y dejar que los eventos surjan, tenga en cuenta.
ratingsParent.addEventListener('click', e => { if (e.target.parentNode === ratingsParent) { e.target.classList.toggle('clicked'); } });