En mi aplicación angular tengo 10 íconos y mi requisito es cambiar el color de blanco a rojo cuando hacemos clic en un ícono entre los 10 íconos. Y si hacemos clic en otro ícono, se volverá rojo, y el ícono de color anterior cambiado (rojo) se volverá blanco.
mi codigo es
tablero.componente.html
<div class="container"> <i class=" icon icon-smiley-face-1"></i> <i class=" icon icon-smiley-face-2"></i> <i class=" icon icon-smiley-face-3"></i> <i class=" icon icon-smiley-face-4"></i> <i class=" icon icon-smiley-face-5"></i> <i class=" icon icon-smiley-face-6"></i> </div>Al igual que el anterior, tengo 10 íconos entre los 10 íconos, si hago clic en uno, se volverá rojo y, a la vez, solo debe cambiar el color de un ícono.
Sé que debo cambiar el color de un ícono, pero no puedo cambiar varios íconos, ¿alguien puede ayudarme con esto?
Espero que esto ayude. He usado la delegación de eventos aquí. Para la delegación de eventos, puede consultar: https://www.youtube.com/watch?v=3KJI1WZGDrg&list=PLlasXeu85E9eLVlWFs-nz5PKXJU4f7Fks&index=8
o https://dmitripavlutin.com/javascript-event-delegation/
Avísame por si necesitas alguna explicación.
tablero.componente.html
<div class="container" (click)="onSelectIcon($event)"> <i id="face-1" class="icon icon-smiley-face-1"></i> <i id="face-2" class="icon icon-smiley-face-2"></i> <i id="face-3" class="icon icon-smiley-face-3"></i> <i id="face-4" class="icon icon-smiley-face-4"></i> <i id="face-5" class="icon icon-smiley-face-5"></i> <i id="face-6" class="icon icon-smiley-face-6"></i> </div>tablero.componente.ts
prevSelectedIconId = "" activeIconClass = "red" onSelectIcon(event) { const currSelectedIconId = event.target.id document.getElementById(currSelectedIconId).classList.add(activeIconClass) if (this.prevSelectedIconId && this.prevSelectedIconId !== currSelectediconId) { document.getElementById(this.prevSelectedIconId).classList.remove(activeIconClass) } this.prevSelectedIconId = event.target.id }tablero.componente.scss
.red { background-color : red; }