Question

在我的HTML中，我有一个元素列表。当用户单击任何此元素时，将调用js方法。元素在为它们设置的类方面有所不同。

我正在尝试将clicked元素发送给js函数，使我们使用“ this”：

id|Name          |Description   |Author_name |Print_length|Language|
1 |The Stranger's|Stranger's... |Albert Camus|208 page    |English |

但是事实证明，发送父元素而不是列表中的单个元素。

如何解决此问题？

Answer 1

如果发送FCPATH，则可以获得点击的元素

$event

在您的组件上，您可以获取源元素

(click)="onClick(my_string, $event)"

Answer 2

您可以传递$event对象，并在函数中使用event.target获取触发事件的元素。无需将onclick添加到每个元素。而是将其添加到父项并委托事件

HTML

<ul (click)="onClick($event)">
  <li class="first"> First Element </li>
  <li class="second"> Second Element </li>
  <li class="third"> Third Element </li>
  <li class="fourth"> Fourth Element </li>
  <li class="fifth"> Fifth Element </li>
</ul>

component.js

onClick(event) {
    console.log(event.target)
  }

这里是full code

将点击的元素从HTML列表发送到JS

2 个答案: