此关键字和 addEventHandler 函数存在问题

Question

我在 JS 中向 HTML 元素添加类时遇到问题。

我想创建某种手风琴，但我不知道我做错了什么（首先我应该说我对 JS 没有太多经验）。这就是我使用的 HTML 元素的样子：

<div class="account_content_orders_list_order">

  <div class="account_content_orders_list_order_element"></div>

  <div class="account_content_orders_list_order_element"></div>

  <div class="account_content_orders_list_order_element"></div>

  <div class="account_content_orders_list_order_element"></div>

  <div class="account_content_orders_list_order_element"></div>

  <div class="account_content_orders_list_order_element"></div>

  <div class="account_content_orders_list_order_element"></div>

</div>

这是我在 JS 中的脚本：

  let orders = document.getElementsByClassName("account_content_orders_list_order");

  for (let k = 0; k < orders.length; k++) {

    orders[k].addEventListener("click", () => {

      this.classList.add("active_order");

    });

  }

但是当我单击 HTML 元素时，我在 Chrome 控制台中收到错误消息：

我想检查这个关键字是否指向正确的 DOM 元素，所以我添加了console.log(this); 到我在上面向您展示的循环，但我现在知道这个指向窗口对象的关键字存在某种问题，我不知道为什么。 

有人可以给点建议吗？我没主意了。对不起，如果它是重复的，我找不到任何与我相似的主题。

Answer 1

箭头函数没有自己的this. 使用标准功能：orders[k].addEventListener("click", function () {&nbsp; &nbsp; this.classList.add("active_order");});如果你真的想使用箭头功能，你可以去event.currentTarget：orders[k].addEventListener("click", event => {&nbsp; &nbsp; event.currentTarget.classList.add("active_order");});addEventListener()注入event.currentTarget为this.