He renderizado varias imágenes usando tag. Quiero cambiar el color de fondo de la imagen cuando se hace clic en ella. Pero cuando hago clic en una imagen, el color de todas las imágenes cambia.
Aquí está mi código. Estoy trabajando en Angular.
html
<img [src]="data.Url" alt="image" (click)="_upload(data.Url)" [ngClass]="{'green' : toggle, 'red': !toggle}" >t
dentro de mi funcion
this.toggle = !this.toggle; this.status = this.toggle ? 'Enable' : 'Disable';Para renderizar múltiples elementos html, supongo que está usando la directiva ngFor , por lo que podría usar el index para dar a cada elemento una clase css diferente.
Por ejemplo:
HTML
<div *ngFor="let option of options; let i = index"> <img [src]="option.Url" (click)="_upload(option.Url, i)" [class.selected]="i === indexSelected" <!--apply the selected css class if condition is TRUE--> > </div>CSS
.selected { background-color: green; }t
... export class YourComponent { indexSelected: number = -1; _upload(url: string, index: number) { // ... this.indexSelected = index; } }Gracias a todos lo hice de esta manera
<td *ngFor="let data of responseData; let i= index;" (click)="active= i" [ngStyle]="{'background-color': active === i ? '#4b8df2' : 'white' }"> <div> <img [src]="data.Url" alt="image" (click)="_upload(data.Url)" > </div> </td>