我希望 Clicked 类一次仅应用于一个单击的元素。单击其他元素后,第一个单击的元素不应再具有该类。它应该有点像 this.clicked 到那个特定的元素。
.rangeContainer{
width: 100%;
height: 46px;
}
.range{
height: 42px;
background-color: #F6F6F6;
color: #035688;
font-size: 12px;
font-weight: 800;
line-height: 46px;
padding: 15px 20px;
cursor: pointer;
}
.clicked{
background-color: white;
color: #7A232E;
border-top: 6px solid #7A232E;
}
I want the
<div class="rangeContainer">
<span (click)="click = !click" [ngClass]="{'clicked' : click}" class="range">K4 - K5</span>
<span (click)="click = !click" [ngClass]="{'clicked' : click}"class="range">1ST - 2ND</span>
<span (click)="click = !click" [ngClass]="{'clicked' : click}"class="range">3RD - 4TH</span>
<span (click)="click = !click" [ngClass]="{'clicked' : click}"class="range">5TH - 8TH</span>
</div>
最佳答案
<span
*ngFor="let range of ['K4 - K5', '1ST - 2ND', '3RD - 4TH', '5TH - 8TH']; let i = index"
(click)="activeIndex = i"
[ngClass]="{ clicked : activeIndex === i }" class="range" >
{{ range }}
</span>
Plunker Example
关于html - Angular 2 : Adding ngClass to the element based on the click event,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44188271/