仅在单击元素上切换CSS类 [英] toggle css class on clicked element only

问题描述

两个div元素的值分别为1和2.每次单击每个元素时，我都希望切换CSS类.提供的解决方案始终切换两个(所有)元素的css类.

Two div elements have values 1 and 2. Every time when each element is clicked I want to toggle css class. This provided solution always toggle css class for both (all) elements.

<div (click)="toggleClass()" [class.active]="isActive">1</div>
<div (click)="toggleClass()" [class.active]="isActive">2</div>

export class MyComponent{
  isActive = false;  
  constructor(){}  
  toggleClass() {
     this.isActive = !this.isActive;
  }
}

推荐答案

<div (click)="toggleClass(0)" [class.active]="isActive[0]">1</div>
<div (click)="toggleClass(1)" [class.active]="isActive[1]">2</div>

export class MyComponent{
  isActive = [false, false];  
  constructor(){}  
  toggleClass(idx) {
     this.isActive[idx] = !this.isActive[idx];
  }
}

如果要为不同的元素使用不同的状态，则需要提供空间(变量)来存储该状态.角不是魔法；-)

If you want different states for different elements, you need to provide the space (variable) to store that state. Angular isn't magic ;-)

<div (click)="toggleClass(0)" [class.active]="isActive === 0">1</div>
<div (click)="toggleClass(1)" [class.active]="isActive === 1">2</div>

export class MyComponent{
  isActive = -1;  
  constructor(){}  
  toggleClass(idx) {
     this.isActive = idx;
  }
}

这篇关于仅在单击元素上切换CSS类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！