使用mat-slide-toggle切換兩個類

Question

使用mat-slide切換可切換兩個類d-block和d-none 。 選中切換后，我需要將d-none類更改為d-block ，將d-block更改為d-none

<mat-slide-toggle >
  View All Statuses
</mat-slide-toggle>

<div class="row">
    <div class="col-12 d-block">
      <svg id="bar-chart" width="550" height="300"></svg>
    </div>
    <div class="col-12 d-none">
      <svg id="stacked-bar-chart" width="550" height="300"></svg>
    </div>
</div>

Answer 1

嘗試它會起作用，否則您可以使用[ngClass]="bool ? 'd-block' : 'd-none'"

 $("#toggleclick").click(function () { if($(".d-block").hasClass("hide")) { $(".d-block").removeClass("hide"); $(".d-none").addClass("hide"); } else if($(".d-none").hasClass("hide")) { $(".d-none").removeClass("hide"); $(".d-block").addClass("hide"); } }) 

 .d-block{ background:#ff0; } .d-none{ background:#0ff; } .hide{ display:none; } mat-slide-toggle{ cursor:pointer; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <mat-slide-toggle id="toggleclick"> View All Statuses </mat-slide-toggle> <div class="row"> <div class="col-12 d-block"> <svg id="bar-chart" width="550" height="300"></svg> D-Block </div> <div class="col-12 d-none hide"> <svg id="stacked-bar-chart" width="550" height="300"></svg> D-None </div> </div> 

Answer 2

下面的代碼使用Angular的ngClass指令

HTML：

<mat-slide-toggle [(ngModel)]="checked">
  View All Statuses
</mat-slide-toggle>

<div class="row">
    <div class="col-12" [ngClass]="checked ? 'd-none' : 'd-block'">
      <svg id="bar-chart" width="550" height="300"></svg>Hello
    </div>
    <div class="col-12" [ngClass]="checked ? 'd-none' : 'd-block'">
      <svg id="stacked-bar-chart" width="550" height="300"></svg>World
    </div>
</div>

CSS：

.d-block {
    display: block;
}

.d-none {
    display: none;
}