[英]Toggle Two classes using mat-slide-toggle
Toggle two classes d-block
and d-none
using mat-slide
toggle. 使用
mat-slide
切换可切换两个类d-block
和d-none
。 When toggled is checked I need to change the d-none
class to d-block
and d-block
to 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>
try this it will works, otherwise you can use [ngClass]="bool ? 'd-block' : 'd-none'"
尝试它会起作用,否则您可以使用
[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>
Below code using Angular's ngClass
directive 下面的代码使用Angular的
ngClass
指令
HTML: 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: CSS:
.d-block {
display: block;
}
.d-none {
display: none;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.