html - 仅自定义被点击的按钮
问题描述
我开发了两列,都有几个按钮。目标是单击每个按钮,更改该按钮的背景颜色和字体颜色。
在早期阶段,所有按钮都处于自然状态。通过单击左列(A、B、C)中的按钮,我只希望该按钮更改背景颜色和字体颜色,与右列中的按钮相同。
还有一种方法是,每当您单击左列中的按钮时,如果右列中的任何按钮具有背景颜色(已被单击),它将返回其原始状态?
我尝试使用 jquery 并使用 ID 和类,但这似乎不是最正确的方法。
有人能帮我吗?
HTML
<div class="row">
<div class="col">
<div *ngFor="let item of Groups">
<button (click)="Change(0,item)" class="btnGrup">{{item.name}}</button>
</div>
</div>
<div class="col">
<div *ngFor="let item of Words">
<button (click)="Change(1,item)" class="btn2">{{item.name}}</button>
</div>
</div>
</div>
TS
Change(index, data) {
let self = this;
switch (index) {
case 0:
// $(".btnGrup").css({ "background-color": "#f7f7f9", "color": "#BCBCCB" });
// $(".btnGrup").css({ "background-color": "rgba(73, 129, 194, 0.1)", "color": "rgba(73, 129, 194, 1)" });
break;
case 1:
// $(".btn2").css({ "background-color": "#f7f7f9", "color": "#BCBCCB" });
// $(".btn2").css({ "background-color": "rgba(73, 129, 194, 0.1)", "color": "rgba(73, 129, 194, 1)" });
break;
}
}
解决方案
只需向您的组添加一个新属性,例如将其称为“检查”
Groups=[{
id:1,
name:"A",
check:false
},
{
id:2,
name:"B",
check:false
},
...
]
创建两个类
.class1
{
background-color: #f7f7f9;
color: #BCBCCB
}
.class2
{
background-color: rgba(73, 129, 194, 0.1);
color: rgba(73, 129, 194, 1)
}
并使用ngClass
<button (click)="item.check=!item.check"
class="btnGrup"
[ngClass]="{'class1':item.check,'class2':!item.check}"
>{{item.name}}</button>
如果您只需要一个按钮,则无需向“组”添加新属性,只需要两个变量
buttonSelect1=-1
buttonSelect2=-1
并使用
<div *ngFor="let item of Groups;let i=index">
<button (click)="buttonSelect1=i"
class="btnGrup"
[ngClass]="{'class1':buttonSelect1==i,'class2':buttonSelect1!=i}"
>{{item.name}}</button>
</div>
推荐阅读
- mongodb - 在 mongodb 集合中获取最新值的问题
- javascript - Iphone/iOS Web 浏览器调试
- generative-adversarial-network - 如何完成 WGAN 训练网络?
- xamarin.forms - 在 Xamarin.Forms 中使用 PathGeometry 剪切视图
- nginx - 指向 Azure CDN 的 Kubernetes 服务对象 ExternalName
- javascript - 轮询和更新状态,除非特定的道具更新
- android - 我可以使用 MediaRecorder 在 Android 中通过捕获静音检测来录制音频吗?
- ios - Alamofire:在特定 URL 和设备上请求超时
- java - 以函数方式计算列表中的差异
- ios - 如何将“标签”字段中的数字值除以 UIStepper 的值?