Question

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

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

还有没有一种方法，每当您单击左列中的按钮时，如果右列中的任何按钮具有背景色（已经被单击），它将返回到其原始状态？

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

有人可以帮我吗？

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>

仅自定义单击的按钮

1 个答案: