时间戳

首页 > 解决方案 > 一次仅将选定样式应用于一个 div（不使用 jQuery）

javascript - 一次仅将选定样式应用于一个 div（不使用 jQuery）

问题描述

请你帮助我好吗。<span class="badge badge-light"><i class="fa fa-check-circle"></i></span>当我单击带有 class="role-box" 的 div 时，我需要使其可见（最初它具有样式“可见性：隐藏”）。它应该以下列方式工作：当我单击标题为“Role-one”的 div 时，该 div 的徽章将可见，如果我单击标题为“Role-two”的 div，则该 div 的徽章“角色一” div 将被隐藏，“角色二” div 的徽章将可见。目前，如果我点击它们，它会显示所有 div 的徽章。下面是代码。

HTML：

<div class="col-6 col-md-4" *ngFor="let role of joblabels, index as ri">
    <div class="role-box" id="{{ri}}" (click)="selectRole(ri)">
        <span class="badge badge-light"><i class="fa fa-check-circle"></i></span>
        <p class="role-type">{{ role.title }}</p>
    </div>
</div>

TS：

joblabels = [
{title: 'Role-one'}, 
{title: 'Role-two'}, 
{title: 'Role-three'}];


selectRole(id) {
let badge = document.getElementById(id).childNodes;
if (badge[1]['style'].visibility === 'visible') {
  badge[1]['style'].visibility = 'hidden';
}
else {
  badge[1]['style'].visibility = 'visible';
} }

标签： javascripthtmlangular

解决方案

您可以使用角度的 [ngStyle]。

有一个保存选中状态的变量

组件 TS：

selectedRole: any;

joblabels = [
{title: 'Role-one'}, 
{title: 'Role-two'}, 
{title: 'Role-three'}];


selectRole(title) {
  this.selectedRole = title;
}

HTML：

<div class="col-6 col-md-4" *ngFor="let role of joblabels, index as ri">
    <div class="role-box" id="{{ri}}" (click)="selectRole(role.title)">
        <span class="badge badge-light" [ngStyle]="{'visibility':role.title === selectedRole ? '' : 'hidden' }"><i class="fa fa-check-circle"></i></span>
        <p class="role-type">{{ role.title }}</p>
    </div>
</div>

推荐阅读