Saya mengembangkan dua kolom, keduanya dengan beberapa tombol. Tujuannya adalah untuk mengklik setiap tombol, mengubah warna latar belakang dan warna font tombol itu.

Pada tahap awal, Anda memiliki semua tombol dalam keadaan alaminya. Dengan mengklik tombol di kolom kiri (A, B, C) saya hanya ingin tombol itu mengubah warna latar belakang dan warna font, sama dengan tombol di kolom kanan.

Apakah ada juga cara bahwa setiap kali Anda mengklik tombol di kolom kiri, jika di kolom kanan ada tombol yang memiliki warna latar belakang (sudah diklik) itu akan kembali ke keadaan semula?

Saya mencoba menggunakan jquery dan bekerja dengan ID dan kelas, tetapi sepertinya itu bukan cara yang paling benar.

Dapatkah seseorang membantu saya?

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;
    }
  }
1
Steve Mc 28 Mei 2020, 19:07

1 menjawab

Jawaban Terbaik

Cukup tambahkan properti baru ke grup Anda, mis. menyebutnya "cek"

Groups=[{
  id:1,
  name:"A",
  check:false
},
{
  id:2,
  name:"B",
  check:false
},
...
]

Buat dua kelas

.class1
  {
     background-color: #f7f7f9;
   color: #BCBCCB 
   }
.class2
{
  background-color: rgba(73, 129, 194, 0.1);
  color: rgba(73, 129, 194, 1)
}

Dan gunakan ngClass

<button (click)="item.check=!item.check" 
         class="btnGrup"
         [ngClass]="{'class1':item.check,'class2':!item.check}"
       >{{item.name}}</button>

Jika Anda hanya menginginkan satu tombol, Anda tidak perlu menambahkan properti baru ke "grup" Anda, hanya perlu dua variabel

buttonSelect1=-1
buttonSelect2=-1

Dan gunakan

<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
Eliseo 28 Mei 2020, 16:38