![](/img/trans.png)
[英]How do i toggle between multiple classes for multiple elements in jQuery?
[英]Angular2: How do I toggle classes on similar elements
我希望能夠在我點擊時切換顏色。 現在,當我點擊一個時,它會切換它們。 我想單獨切換每一個。
HTML:
<div class="crit-desc crit-item-flags">
<i class="fal fa-flag" (click)="flagActive()" [ngClass]="flagStatus ? 'flagActive' : 'flagNotActive'"></i>
<i class="fal fa-bookmark" (click)="flagActive()" [ngClass]="flagStatus ? 'flagActive' : 'flagNotActive'"></i>
<i class="fal fa-alarm-clock" (click)="flagActive()" [ngClass]="flagStatus ? 'flagActive' : 'flagNotActive'"></i>
</div>
JS:
import { Component } from '@angular/core';
@Component({
selector: 'app-aside',
templateUrl: './app-aside.component.html'
})
export class AppAsideComponent {
closeResult: string;
flagStatus: boolean;
constructor(private modalService: NgbModal) { }
flagActive(){
this.flagStatus = !this.flagStatus;
}
}
我要說的第一件事是,你使用一個變量來控制所有元素的類,並且該變量將在點擊其中任何一個時發生變化,所以是的..這將無法工作,不知何故,它們需要不同的范圍他們自己的。
我無法說出你的問題的優化解決方案是什么,但這是目前令我印象深刻的。
我創建了一個指令並添加了所有元素,然后通過指令本身控制類。
<!-- buttons for simplicity -->
<button appToggleColor class="yellow">Button3</button>
<button appToggleColor class="yellow">Button2</button>
<button appToggleColor class="yellow">Button1</button>
constructor(private renderer: Renderer2) { }
private flag = true
@HostListener('click', ['$event']) onClick($event: Event) {
this.flag = !this.flag;
if (this.flag) {
this.renderer.removeClass($event.target, 'green');
this.renderer.addClass($event.target, 'yellow')
}
else {
this.renderer.removeClass($event.target, 'yellow');
this.renderer.addClass($event.target, 'green');
}
}
我正在使用Rendere2
添加/刪除類.. https://stackblitz.com/edit/angular-zdbsbp?file=src%2Fapp%2Ftoggle-color.directive.ts
一個簡單的方法是:
<div class="crit-desc crit-item-flags">
<i class="fal fa-flag" (click)="flagActive('flag')" [ngClass]="items['flag'].flagStatus ? 'flagActive' : 'flagNotActive'">test1</i>
<i class="fal fa-bookmark" (click)="flagActive('bookmark')" [ngClass]="items['bookmark'].flagStatus ? 'flagActive' : 'flagNotActive'">test2</i>
<i class="fal fa-alarm-clock" (click)="flagActive('alarmClock')" [ngClass]="items['alarmClock'].flagStatus ? 'flagActive' : 'flagNotActive'">test3</i>
</div>
ts代碼:
items = {
"flag" : {flagStatus:false},
"bookmark" : {flagStatus:false},
"alarmClock" : {flagStatus:false}
} ;
constructor() { }
flagActive(item){
console.log(this.items[item]) ;
this.items[item].flagStatus = !this.items[item].flagStatus
}
使用與所有圖標不同的模板變量名稱
<div class="crit-desc crit-item-flags">
<i class="fal fa-flag" appToggle #btnone="appToggle" [ngClass]="btnone.flagStatus ? 'flagActive' : 'flagNotActive'"></i>
{{btnone.flagStatus}}
<i class="fal fa-bookmark"
appToggle #btntwo="appToggle"
[ngClass]="btntwo.flagStatus ? 'flagActive' : 'flagNotActive'"></i>
{{btntwo.flagStatus}}
<i class="fal fa-alarm-clock" appToggle #btnthree="appToggle" [ngClass]="btnthree.flagStatus ? 'flagActive' : 'flagNotActive'"></i>
{{btnthree.flagStatus}}
</div>
創建指令和綁定值
import {Directive,HostListener} from '@angular/core';
@Directive({
selector: '[appToggle]',
exportAs:'my-directive'
})
export class MyDirective {
flagStatus;
@HostListener('click', ['event']) flagActive() {
this.flagStatus=!this.flagStatus;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.