<li> 元素类变化，使用 DOM答案

【问题标题】：<li> element class change, using DOM<li> 元素类变化，使用 DOM
【发布时间】：2023-04-06 10:05:01
【问题描述】：

我想让<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> 元素起作用。

【问题讨论】：

您的问题中没有标记 -> minimal reproducible example; “它同时作用于所有<li> 元素” 是什么意思？您的点击处理程序只会更改 DOM 中的第一个 <li> 元素。
fyi dblclick 连续单击鼠标两次，而不是再次单击已单击一次的项目。根据您的问题描述，您的代码不会像您期望的那样切换类。您应该将侦听器中的add 更改为toggle

标签： javascript dom element

【解决方案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>

【讨论】：

@Sebastian 很高兴你开心！如果我的回答对你有帮助，别忘了采纳哦。

【解决方案2】：

您已经在 UL 上设置了事件侦听器，这将影响内部的所有 LI。另一个选项 - 您可以在 LI 上设置事件侦听器。

var lis = document.querySelectorAll("li");

lis.forEach(li => {
    li.addEventListener("click", function(ev){
        ev.target.classList.add("done");
    })


    li.addEventListener("dblclick", function(ev) {
        ev.target.classList.remove("done");
    })
});

li {
  color: lightgray;
}

li.done {
  color: green;
}

li {
  cursor: pointer;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

https://jsfiddle.net/3jcbaqgu/17/

【讨论】：

我现在明白了！！非常感谢:)

【解决方案3】：

确保在使用event.target 单击元素时选择正确的元素。

<ul id="my-list">
    <li>Item #1</li>
    <li>Item #2</li>
    <li>Item #3</li>
</ul>

const list = document.querySelector('#my-list');
list.addEventListener('click', (event) => {

    // The clicked element
    const target = event.target;

    // Make sure the clicked element is an <li> element
    if (target instanceof HTMLLIElement) {
        // Toggle class
        target.classList.toggle('done');
    }
});

有用的文档：https://developer.mozilla.org/en-US/docs/Web/API/Event/target

【讨论】：