时间戳

首页 > 解决方案 > 如何在单击时将 CSS 类添加到仅被单击的按钮

css - 如何在单击时将 CSS 类添加到仅被单击的按钮

问题描述

我想知道如何在使用 Angular 单击时仅向一个按钮添加一个 CSS 类。现在，当我单击任何按钮时，该类将添加到所有按钮中。

我想将 css 类添加到每个单击的按钮。

我可以通过为每个按钮创建几个不同的 css 类来做到这一点，然后当单击一个按钮时，它只会为该按钮添加特定的类，但是有没有更好的方法来做到这一点？

任何帮助将不胜感激，谢谢。

//btns.component.html

 <div class="btn-container">
    <div class="btn-col1">
      <button class="stepOne-btns" (click)="wasClicked()" [ngClass]="btnStatus ? 'active' : 'inactive'"><img
          src="../../assets/images/button-icons/home-icon.png" alt=""><strong>Home</strong></button>
      <button class="stepOne-btns" (click)="wasClicked()" [ngClass]="btnStatus ? 'active' : 'inactive'"><img
          src="../../assets/images/button-icons/life-icon.png" alt=""><strong>Life</strong></button>
      <button class="stepOne-btns" (click)="wasClicked()"[ngClass]="btnStatus ? 'active' : 'inactive'"><img src="../../assets/images/button-icons/car-icon.png"
          alt=""><strong>Auto</strong></button>
    </div>
    <div class="btn-col2">
      <button class="stepOne-btns" (click)="wasClicked()" [ngClass]="btnStatus ? 'active' : 'inactive'"><img
          src="../../assets/images/button-icons/condo-icon.png" alt=""><strong>Condo</strong></button>
      <button class="stepOne-btns" (click)="wasClicked()" [ngClass]="btnStatus ? 'active' : 'inactive'"><img
          src="../../assets/images/button-icons/flood-icon.png" alt=""><strong>Flood</strong></button>
      <button class="stepOne-btns" (click)="wasClicked()" [ngClass]="btnStatus ? 'active' : 'inactive'"><img
          src="../../assets/images/button-icons/umbrella-icon.png" alt=""><strong>Umbrella</strong></button>
    </div>
  </div>

//btns.component.ts

  btnStatus: boolean = false;

  wasClicked() {
    this.btnStatus = !this.btnStatus;
    console.log(this.btnStatus);
  }

//btns.component.css

  .active {
    border: 4px solid $primary-color;
  }

  .inactive{
    border: none;
  }

标签： cssangulartypescriptbutton

解决方案

假设您想要 app.component.html 上的 3 个按钮，并且想要在单击任何一个按钮时更改按钮 css。

app.component.html

<app-btn [url]="item.url" *ngFor="let item in [{url:'assets/images/button-icons/home-icon.png'},{url:'/assets/images/button-icons/life-icon.png'},{url:'assets/images/button-icons/car-icon.png'}]"></app-btn>

[1,2,3] 用于 3 个按钮，可以根据需要为任意长度（写这个是为了简化事情）。您可以将您的 URL 作为输入传递，如上所示

创建一个新组件说 btn

btn.component.html

<button [src]="url" (click)="clicked()" [ngClass]="btnStatus ? 'active' : 'inactive'"></button>

btn.component.ts

@Input() url; 
clicked() {
          this.btnStatus = this.!btnStatus
      }

希望这会有所帮助，它们可能是一些小的语法错误。

推荐阅读