javascript - 通过事件委托(delegate)在动态生成的元素上切换 CSS 类时遇到问题

Question

所以我有我的应用程序动态生成的 li 元素，并且我想在单击 li 时切换 CSS 类。我通过事件委托(delegate)来执行此操作，但我不知道如何访问单击的 li 以使其切换。

这是我现在拥有的:

var listElement = document.querySelector("ul");

listElement.addEventListener("click", function(e) {
    if (e.target && e.target.nodeName == 'LI') {
        // How would I access the clicked li and apply
        // the .classList.toggle("class")?
    }
});

Answer 1

使用Element.closest()关于 Event.target查找单击的列表项(target)。如果您找到了列表项，请从 ul 的所有子级中删除 active 类，并在目标上设置事件。

var listElement = document.querySelector("ul");

listElement.addEventListener("click", function(e){
  var target = e.target.closest('li');
  
  if(target) {
    e.currentTarget.querySelectorAll('li')
      .forEach(li => li.classList.remove('active'));
      
    target.classList.add('active')
  };
});

.active {
  color: red;
}

<ul>
  <li><span>item 1</span></li>
  <li><span>item 2</span></li>
  <li><span>item 3</span></li>
  <li><span>item 4</span></li>
  <li><span>item 5</span></li>
</ul>