javascript - 元素类更改，使用 DOM

Question

我想让<li>元素在我单击它时更改类，当我再单击一次以将其删除时。我使用了这样的简单代码：

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

ul.addEventListener("click", function() {
  var li = document.querySelector("li");
  li.classList.add("done");
})


ul.addEventListener("dblclick", function() {
  var li = document.querySelector("li");
  li.classList.toggle("done");
})

因此，正如您在单击时看到的那样，它会继续，而在 dbl 单击时，它会消失，但它同时对所有<li>元素起作用。

标签： javascriptdomelement

Answer 1

您需要将该类应用于事件的目标。

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

ul.addEventListener("click", (e) => {
  e.target.classList.add("done");
});

ul.addEventListener("dblclick", (e) => {
  e.target.classList.toggle("done");
});

.done {
  background: green;
}

<ul>
  <li>A</li>
  <li>A</li>
  <li>A</li>
  <li>A</li>
  <li>A</li>
</ul>