0
330
ViewsCambiar el color de fondo del botón: cambia cuando se hace clic, elimina cuando se hace clic en otro botón
Póster por primera vez: he intentado encontrar una solución en otro lugar, pero no he podido.
He creado una cuadrícula de botones. Al hacer clic en el botón 1, quiero que el fondo cambie a un color predeterminado. Cuando se hace clic en otro botón (botón 2), me gustaría que el fondo del botón (1) volviera a cambiar al original, seguido del botón en el que se hizo clic recientemente (botón 2) para tomar el color preestablecido.
Aquí está el HTML escrito hasta ahora:
<div class="tip-select"> <p class="ttext">Select Tip %</p> <div class="tip"> <div class="five-tip btn tips">5%</div> <div class="ten-tip btn tips">10%</div> <div class="fifteen-tip btn active-tip tips">15%</div> <div class="twentyfive-tip btn tips">25%</div> <div class="fifty-tip btn tips">50%</div> <div class="custom btn tips">Custom</div> </div> </div>Aquí está el Javascript escrito hasta ahora:
tips.forEach(function (mov) { mov.addEventListener("click", handleClick); }); function handleClick(event) { tips.forEach(function (val) { if (event.target.innerHTMl == val.innerHTMl) { val.classList.add("active-tip"); console.log(val); } }); }Aquí está el diseño actual como referencia:
Mi idea es iterar a través de la lista de nodos y asignar punta activa como una clase basada en el botón seleccionado. Por el momento, todos los botones cambian de color al hacer clic.
3 answers
Answer question0
Primero, JavaScript distingue entre mayúsculas y minúsculas, por lo que innerHTMl debería leer innerHTML . Pero ese no es un método sólido para lograr el efecto deseado.
Además, las tips deben ser una matriz, así que use querySelectorAll para devolver una colección en vivo ('en vivo' significa que solo se almacenan las referencias a los elementos y no a los elementos). Para convertir esto en una matriz, use Array.from() .
Primero remove todos los estilos active-tip y luego agregue uno nuevo al elemento requerido.
tips=Array.from(document.querySelectorAll('.tips')); tips.forEach(function (mov) { mov.addEventListener("click", handleClick); }); function handleClick(e) { tips.forEach((t)=>t.classList.remove("active-tip")); e.target.classList.add("active-tip"); } .active-tip {color:red} <div class="tip-select"> <p class="ttext">Select Tip %</p> <div class="tip"> <div class="five-tip btn tips">5%</div> <div class="ten-tip btn tips">10%</div> <div class="fifteen-tip btn active-tip tips">15%</div> <div class="twentyfive-tip btn tips">25%</div> <div class="fifty-tip btn tips">50%</div> <div class="custom btn tips">Custom</div> </div> </div>0
Puede agregar un prameter a la función, que es la identificación o la clase de su div, de modo que cuando su función llame a su función, tome el texto interno del div con su identificación que obtiene de pramerter.
0
Le sugiero que compare los objetos del nodo en lugar de su innerHtml . Además, le falta el caso else para restablecer todos los nodos no seleccionados (eliminar la clase active-tip ).
aquí hay un ejemplo
let tips = Array.from(document.getElementsByClassName('tips')) tips.forEach(function (mov) { mov.addEventListener("click", handleClick); }); function handleClick(event) { tips.forEach(function (val) { if (val == event.target) { val.classList.add("active-tip"); } else { val.classList.remove("active-tip"); } }); }y el ejemplo completo de codepen aquí https://codepen.io/beezital/pen/OJxoxmK