javascript - 获取被点击的元素

Question

我目前需要更具体地说明类切换的功能，该类切换只需要发生在被单击元素内的子元素中。我有一个“.node”类，当单击它时，它应该在它的子“.node-dropdown”上切换一个类。我有多个带有 (click)="showNodeDropdown"的节点，并且当前所有节点下拉列表都同时隐藏或显示。

HTML

<div class="node" *ngIf="authService.isInternalUser()" (click)="showNodeDropdown()">
<span class=" fa fa-clock-o node-icon"></span>
<p>Menu Title</p>

请记住，我的页面中有多个使用 (click)="showNodeDropdown()"的元素，这只是一个示例。

JS

showNodeDropdown() {
    $('.node-dropdown').toggleClass('hidden');
}

我尝试将我的JS更改为类似$(this).children('.node-dropdown).toggleClass('hidden');

但是(this)当前仅定义为“object Object”

有没有办法获取被单击的元素并将其设置为(this)，以便我只能在其子元素上切换？预先感谢您的帮助。

Answer 1

以下是两种获取点击元素的 Angular 方法:

1. 将事件目标传递给处理程序:

    <div (click)="showNodeDropdown($event.target)" ... >

定义模板引用变量，并将其传递给处理程序:

<div #myDiv (click)="showNodeDropdown(myDiv)" ... >

在这两种情况下，事件处理程序都可以写为:

showNodeDropdown(element: HTMLElement) {
    let nodes = element.querySelectorAll(".node-dropdown");
    for (let i = 0; i < nodes.length; i++) {
        nodes[i].classList.toggle("hidden");
    }
}

或者，使用 jQuery:

showNodeDropdown(element: HTMLElement) {
    $(element).children(".node-dropdown").toggleClass("hidden");
}