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

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) => {

    // 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>

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 {   text-decoration : line-through; }

$("li").click(function () {

   this.classList.toggle('active');

});

Answer 4

问题在于范围。

function addDoneClass() {

  li.className = "done"

}

在您的上下文中， li 是列表项的数组。如果不运行，我猜想单击任何列表项都会删除所有列表项。相反，您需要传递要更改的特定列表项。

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

  addDoneClass(this); //this is the list item being clicked.

});

function addDoneClass(obj) {

  // Now you can change to toggle if you want.

  obj.className = "done"

  // 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>