每当我单击列表项时，如何打开和关闭课程？

Question

每当我单击列表项时，我都会尝试打开和关闭课程。我尝试过几种方法，例如使用 classList.toggle 并将列表元素包装在锚标记中，然后尝试通过该方法将类添加到列表项中，但是我尝试的东西越多，我就越感到困惑。

下面是我的代码片段。

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

li.addEventListener('click', (e) => {

    addDoneClass();//

  });

function addDoneClass() {

  li.className = "done"

}

.done {

  text-decoration: line-through;

}

  <ul>

      <li random="23">Notebook</li>

      <li>Jello</li>

      <li>Spinach</li>

      <li>Rice</li>

      <li>Birthday Cake</li>

      <li>Candles</li>

    </ul>

你可能会看着我的 JavaScript 代码，想知道为什么我这样做，因为我此时非常困惑，这是我尝试的最后一件事。

Answer 1

const elements = document.querySelectorAll("li");elements.forEach((element) => {&nbsp; &nbsp; // First option&nbsp; &nbsp; element.addEventListener('click', function() {&nbsp; &nbsp; &nbsp; &nbsp; this.classList.toggle('active');&nbsp; &nbsp; });&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; // Second option&nbsp; &nbsp; //element.addEventListener('click', function() { customHandle(this); });&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; // Third option&nbsp; &nbsp; //element.addEventListener('click', (e) => customHandle(e.target.closest('li')));});// For the second and third options//function customHandle(element) {//&nbsp; &nbsp; element.classList.toggle('active');//}li.active {&nbsp; &nbsp; text-decoration: line-through;}<ul>&nbsp; &nbsp; <li>Notebook</li>&nbsp; &nbsp; <li>Jello</li>&nbsp; &nbsp; <li>Spinach</li>&nbsp; &nbsp; <li>Rice</li>&nbsp; &nbsp; <li>Birthday Cake</li>&nbsp; &nbsp; <li>Candles</li></ul>

Answer 2

在我看来，向元素添加一个事件侦听器ul比为li元素添加多个事件侦听器更好。您可以使用classList.add("class")和classList.remove("class")功能。您还需要检查当前项目是否已经具有该类，以便使用该classList.contains("class")函数。这是一个示例（使用三元运算符更新）：const ul = document.getElementById("list");ul.addEventListener('click', (e) => {  const li = e.target;  li.classList.contains('done') ? removeDoneClass(li) : addDoneClass(li)});function addDoneClass(li) {  li.classList.add("done");}function removeDoneClass(li) {  li.classList.remove("done");}.done {  text-decoration: line-through;}<ul id="list">  <li random="23">Notebook</li>  <li>Jello</li>  <li>Spinach</li>  <li>Rice</li>  <li>Birthday Cake</li>  <li>Candles</li></ul>提示：使用classList.toggle("class")，它可以做同样的事情，但它是更干净的方式。

Answer 3

您必须使用“this”关键字来引用当前单击的元素。您可以像这样使用 JQuery 来实现此目的。li.active {&nbsp; &nbsp;text-decoration : line-through; }$("li").click(function () {&nbsp; &nbsp;this.classList.toggle('active');});

Answer 4

问题在于范围。function addDoneClass() {&nbsp; li.className = "done"}在您的上下文中， li 是列表项的数组。如果不运行，我猜想单击任何列表项都会删除所有列表项。相反，您需要传递要更改的特定列表项。li.addEventListener('click', (e) => {&nbsp; addDoneClass(this); //this is the list item being clicked.});function addDoneClass(obj) {&nbsp; // Now you can change to toggle if you want.&nbsp; obj.className = "done"&nbsp; // ie obj.className.toggle("done");}

Answer 5

querySelectorAll返回一个节点列表，addEventLister一次只能应用于一个节点。因此，要修复您的代码，您应该循环遍历li列表中的每个代码。由于您将event(evt) 与 一起使用addEventListener，因此您可以使用event.currentTarget来单击该元素。var listItems = document.querySelectorAll("li");var listItemCount = listItems.length;for (var i = 0; i < listItemCount; i++) {  listItems[i].addEventListener('click', (evt) => {    addDoneClass(evt);//  });}function addDoneClass(evt) {  evt.currentTarget.className = "done";}.done {  text-decoration: line-through;}<ul>  <li random="23">Notebook</li>  <li>Jello</li>  <li>Spinach</li>  <li>Rice</li>  <li>Birthday Cake</li>  <li>Candles</li></ul>