访问同一父级中另一个元素内的 div 元素答案

【问题标题】：Accessing div element inside another element within same parent访问同一父级中另一个元素内的 div 元素
【发布时间】：2021-08-02 03:07:49
【问题描述】：

我正在开发一个小型 Angular 应用程序。下面是我的html sn-p。当我单击 img ( id = myImg) 时，我希望 div ( id = metaoptions ) 在显示/隐藏之间切换，但它不工作

<div>
    <div #metaoptions id="metaoptions" class="meta-options" [hidden]="true" *ngFor="let option of metaOptions">
        <span>{{option.label}}</span>
    </div>
    <img id="myImg" (click)="metaoptions.hidden = (!metaoptions.hidden)"  src="blabla.jpeg">
</div>

相同的方法在我的代码中的不同位置起作用。我为 mouseover 和 mouseout 事件切换图像

<tr class="abc" (mouseover)="helpImg.hidden = false" (mouseout)="helpImg.hidden = true">
    <td class="xyz">
        {{setting.label}}
    </td>
    <td>
        <div class="zxc" >
         <mat-checkbox>
         </mat-checkbox>
        <img #helpImg [hidden]="true" class="help-img" src="/assets/icons/dark/help_img.svg" (click)="showHelp(setting.name)"/>
        </div>
    </td>
</tr>

【问题讨论】：

你对 Angular 使用了一种奇怪的方法。我强烈建议使用 *ngIf 而不是在模板中编写 TS 代码（改用方法）。这是一个使用普通 Angular 代码的相当简单的任务。
@WillAlexander 我不能这样做，因为在另一个 *ngFor 中有多个父 div 副本。如果您认为有什么办法，请随时回复帖子。

标签： javascript html css angular typescript

【解决方案1】：

在您的 HTML 中：

<div id="metaoptions" *ngIf="metaOptionsVisible"></div>
<img id="myImg" (click)="onClickImg()">

在您的 TS 中：

onClickImg() {
  this.metaOptionsVisible = !this.metaOptionsVisible;
}

【讨论】：