麻烦通过事件委托在动态生成的元素上切换CSS类

Question

所以我有我的应用程序动态生成的li元素，我想在单击li时切换CSS类。我正在通过事件委托来执行此操作，但我不知道如何访问单击以使其切换的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()上使用Element.closest()查找被单击的列表项目（Event.target）。如果找到列表项，请从Event.target的所有子级中删除target类，然后在active上设置为活动状态。

ul

target

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