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

【问题标题】：Apply selected styles to only one div at a time (without jQuery)一次仅将选定样式应用于一个 div（不使用 jQuery）
【发布时间】：2018-06-19 07:48:49
【问题描述】：

你能帮帮我吗？当我使用 class="role-box" 单击 div 时，我需要使 <span class="badge badge-light"><i class="fa fa-check-circle"></i></span> 可见（最初它具有样式“可见性：隐藏”）。它应该以下列方式工作：当我单击标题为“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';
} }

【问题讨论】：

你能考虑修改你的帖子吗？它有点混乱。看不懂

标签： javascript html angular

【解决方案1】：

你可以使用[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>

【讨论】：