Question

我目前需要在我的功能中更具体地进行类切换，只需要在被点击的元素中的子项中进行切换。我有一个“.node”类，当点击它时，它应该在它的子“.node-dropdown”上切换一个类。我有多个这些节点使用（click）=“showNodeDropdown”，目前所有节点下拉列表都被隐藏或同时显示。

HTML

style_formats

请记住，在我的页面中使用（click）=“showNodeDropdown（）”有多个这些元素，这只是一个例子。

JS

style_formats: [
    {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
    {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
    {title: 'Example 1', inline: 'span', classes: 'example1'},
    {title: 'Example 2', inline: 'span', classes: 'example2'},
    {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'},
    {title: 'LI List Class', selector: 'li', classes: 'liclass'},
    {title: 'UL List Class', selector: 'ul', classes: 'listclass'},
    {title: 'Image Float Right', selector: 'img', styles: {float: 'right'}}
],

我尝试将我的JS更改为<div class="node" *ngIf="authService.isInternalUser()" (click)="showNodeDropdown()"> <span class=" fa fa-clock-o node-icon"></span> <p>Menu Title</p>

然而（this）目前仅被定义为“对象对象”

有没有办法可以获得被点击的元素并将其设置为（this），以便我只能切换它的子项？提前感谢您的帮助。

Answer 1

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

将事件目标传递给处理程序：

    <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");
}

获取单击的元素

1 个答案: