只自定义被点击的按钮

Question

我开发了两列，都有几个按钮。目标是单击每个按钮，更改该按钮的背景颜色和字体颜色。

在早期阶段，所有按钮都处于自然状态。通过单击左列（A、B、C）中的按钮，我只希望该按钮更改背景颜色和字体颜色，与右列中的按钮相同。

还有没有一种方法，当你点击左栏中的按钮时，如果右栏中的任何按钮有背景颜色（已经被点击），它就会恢复到原来的状态？

我尝试使用 jquery 并使用 ID 和类，但这似乎不是最正确的方法。

有人可以帮我吗？

DEMO

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;
    }
  }

Answer 1

只需向您的组添加一个新属性，例如称之为“检查”

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>