javascript - 每当我单击列表项时，如何打开和关闭类(class)？

Question

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

下面是我的代码片段。

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) => {
    // First option
    element.addEventListener('click', function() {
        this.classList.toggle('active');
    });
    
    // Second option
    //element.addEventListener('click', function() { customHandle(this); });
    
    // Third option
    //element.addEventListener('click', (e) => customHandle(e.target.closest('li')));
});

// For the second and third options
//function customHandle(element) {
//    element.classList.toggle('active');
//}

li.active {
    text-decoration: line-through;
}

<ul>
    <li>Notebook</li>
    <li>Jello</li>
    <li>Spinach</li>
    <li>Rice</li>
    <li>Birthday Cake</li>
    <li>Candles</li>
</ul>