我想改变按钮的颜色点击按钮。
我正在创建测验应用程序。
点击按钮后,如果答案正确,颜色应更改为绿色,如果答案错误,应更改为红色。
成功了我已经成功了
但现在的问题是,如果答案是错误的,那么它的颜色改变为红色,正确答案按钮的颜色改变为绿色。
如何做到这一点?
play-quiz.html
<ion-list>
<ion-row class="marginTop">
<ion-col class="border ion-text-center">
Grand Central Terminal, Park Avenue, New York is the world's
</ion-col>
</ion-row>
<ion-row class="marginTop">
<ion-col class="ion-text-center">
<ion-button id="1" #first class="btn" expand="block" (click)="onClick(first,'1')">
Largest Railway Station
</ion-button>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="ion-text-center">
<ion-button id="2" #second class="btn" expand="block" (click)="onClick(second,'2')">
highest railway station
</ion-button>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="ion-text-center">
<ion-button id="3" #third class="btn" expand="block" (click)="onClick(third,'3')">
longest railway station
</ion-button>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="ion-text-center">
<ion-button id="4" #four class="btn" expand="block" (click)="onClick(four,'4')">
None of the above
</ion-button>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-button class="btn right" expand="small">
Next
</ion-button>
</ion-col>
</ion-row>
</ion-list>
play-quiz.ts。
answer: any = "1";
onClick(ionicButton, btn: any) {
if(this.answer == btn){
ionicButton.color = 'success';
} else {
ionicButton.color = 'danger';
}
}
2条答案
按热度按时间wdebmtf21#
在HTML中:
在TS中:
你可以在
onClick()
方法中修改的功能。基于isClicked()
返回的值,它将附加类'red'(如果返回true,它将添加,否则否)。CSS你可以所有需要的样式。
希望这能帮上忙。
fgw7neuy2#
你可以通过下面的CSS代码来实现: