在javascript中获取具有特定类的父对象的innerText

Question

我试图在javascript中创建一个函数，当用户单击li元素（例如Option1，Option2，Option3）时，该函数返回类别名称。

在这一点上，我找不到任何有效的方法，有人可以帮助我吗？

作为附加说明：我无法更改网站的实际代码。

谢谢

<ul>
  <li class="has-dropdown">
    <a href="">Category Name</a>
    <a class="arrow" href="#"></a>
    <ul>
      <li><a href="">Option1
      </a></li>
      <li><a href="">Option2
      </a></li>
      <li><a href="">Option3
      </a></li>
    </ul>
  </li>
</ul>

Answer 1

您必须使用querySelectorAll()和addEventListener()将事件附加到所有锚点。然后使用类firstElementChild获得closest()元素的has-dropdown。

您可以尝试以下方式：

document.querySelectorAll('.has-dropdown li a').forEach(function(el){
  el.addEventListener('click', function(){
    console.log(this.closest('.has-dropdown').firstElementChild.textContent);
  });
});

<ul>
  <li class="has-dropdown">
    <a href="#">Category Name</a>
    <a class="arrow" href="#"></a>
    <ul>
      <li><a href="#">Option1
    </a></li>
      <li><a href="#">Option2
    </a></li>
      <li><a href="#">Option3
    </a></li>
    </ul>
  </li>
</ul>