如何在多个 li 元素上分别切换每个按钮？

Question

我正在做项目，我的目标是通过单击切换按钮来切换每个单独的 li 元素。 到目前为止我设法做到了这一点，但它只适用于第一个 li 元素。 你能帮我处理这段代码吗？

<li id="liEl">Target This element</li>
<button id="Btn">toggle</button>

<li id="liEl" >Target This element</li>
<button id="Btn">toggle</button>

<li id="liEl" >Target This element</li>
<button id="Btn">toggle</button>

.done {
  text-decoration: line-through;
  text-decoration-thickness: 0.2rem;
  text-decoration-color:red;
}

Btn= document.getElementById("Btn");
liEl= document.getElementById("liEl");

const toggleDoneClass = () => {

  liEl.classList.toggle('done');
};

Btn.addEventListener('click', toggleDoneClass);

Answer 1

id 属性必须是唯一的。 你可以使用类而不是那个。

HTML

<li class="list_element">Target This element</li>
<button class="btn">toggle</button>

<li class="list_element" >Target This element</li>
<button class="btn">toggle</button>

<li class="list_element" >Target This element</li>
<button class="btn">toggle</button>

您必须选择所有按钮，然后通过循环为每个按钮添加事件侦听器。

Javascript

var btns = document.getElementsByClassName("btn");

for (let i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", () => {
         // Previous is li because li is before button
         btns[i].previousElementSibling.classList.toggle("done");
    });
}

现在这是工作。

Answer 2

您正在为所有按钮提供相同的 ID，而 li 而不是 id 使用类名

btns= document.getElementsByClassName("btn");

它将选择所有包含按钮的类

for(let index = 0;index < btns.length; index++){
   btns[index].onclick = (evt) =>{
  evt.target.previousElementSibling.classList.toggle("done")
    }
}

循环您将单击的所有类，它将采用该元素，然后获取他们的前一个子元素，即 li 并在该元素上切换类

btns= document.getElementsByClassName("btn");

for(let index = 0;index < btns.length; index++){
   btns[index].onclick = (evt) =>{
  evt.target.previousElementSibling.classList.toggle("done")
    }
}

.done {
  text-decoration: line-through;
  text-decoration-thickness: 0.2rem;
  text-decoration-color:red;
}

<li id="" >Target This element</li>
<button  class="btn">toggle</button>

<li id="" >Target This element</li>
<button  class="btn">toggle</button>

<li id="lEl" >Target This element</li>
<button  class="btn">toggle</button>

Answer 3

ID 在页面中应该是唯一的，因此可以将它们切换到类。

如果你想要按钮，你应该添加它们之内列表项元素。

您可以将一个侦听器附加到 <ul> 元素，并让该侦听器在其子项“冒泡”DOM 时捕获事件。 （这称为 event delegation。）

当触发点击事件时，您可以检索使用 event.target 单击的特定元素，检查它是否为按钮元素，找到该按钮的 closest 列表项元素，然后切换其类。

const list = document.querySelector('ul');
list.addEventListener('click', toggleDoneClass);

function toggleDoneClass(e) {
  if (e.target.matches('button')) {
    e.target.closest('li').classList.toggle('done');
  }
}

.done { text-decoration: line-through; text-decoration-thickness: 0.2rem; text-decoration-color:red; }
li button { margin-left: 0.5em; }

<ul>
  <li class="liEl">
    Target This element
    <button type="button">Toggle</button>
  </li>
  <li class="liEl">
    Target This element
    <button type="button">Toggle</button>
  </li>
  <li class="liEl">
    Target This element
    <button type="button">Toggle</button>
  </li>
</ul>

但是，最终，您并不真的需要这些按钮。

const list = document.querySelector('ul');
list.addEventListener('click', toggleDoneClass);

function toggleDoneClass(e) {
  if (e.target.matches('li')) {
    e.target.classList.toggle('done');
  }
}

.done { text-decoration: line-through; text-decoration-thickness: 0.2rem; text-decoration-color:red; }
li:hover { cursor: pointer; }

<ul>
  <li class="liEl">Target This element</li>
  <li class="liEl">Target This element</li>
  <li class="liEl">Target This element</li>
</ul>