如何在Javascript中通过DOM事件切换列表元素

nxagd54h 于 2023-01-24 发布在 Java

关注(0)|答案(1)|浏览(126)

我有一个包含三个元素的列表。我试图打开和关闭一个CSS类，当列表元素被单击时，它会删除文本。我创建了一个函数，并使用一个for循环来检查被单击的列表元素的数组索引。
我定义了以下内容：
列表项目：

<ul>
        <li class="items line-through">Watch</li>
        <li class="items line-through">Shoes</li>
        <li class="items line-through">Cake</li>
</ul>

var list = document.getElementsByClassName("line-through");
创建了一个函数，用于在“单击”事件发生时根据索引从列表中切换数组元素

function checkItem(index){
    console.log("event = " + index)
    list[index].classList.toggle("line-through");
    console.log("list = " + index);}

for(var i=0; i<=list.length; i++){
    console.log("i= " + i);
    list[i].addEventListener("click", checkItem(i));}

所以在我的逻辑之后，我声明了for和i的索引值为零，这是数组中第一个列表的值，然后我添加了打印来检查它是否运行，然后检查列表0、1或2是否被点击，如果是，运行函数并切换list[i]，如果不是，i++并验证下一个列表。
问题是现在它会立即将切换添加到列表的第一个和最后一个项目。我也尝试过使用querrySelectorAll("li")，但它说list[i]是未定义的，我不明白为什么，因为当在控制台中验证list[0]时，它会显示第一个元素。

JavaScript

来源：https://stackoverflow.com/questions/75206941/how-to-toggle-list-element-through-dom-events-in-javascript

1条答案

按热度按时间

xxls0lw81#

您可以重构代码并使用this关键字来定位单击的元素，如下所示：

document.addEventListener('DOMContentLoaded', () => {
  // Execute the code after the HTML content is loaded
  
  const myList = document.querySelector('.my-list');
  const listElements = Array.from(myList.children);
  
  listElements.forEach( li => {
    li.addEventListener('click', checkItem);
  });
  
  function checkItem() {
    // The `this` keyword is the clicked element
    this.classList.toggle('line-through');
  }
});

<ul class="my-list">
        <li class="items line-through">Watch</li>
        <li class="items line-through">Shoes</li>
        <li class="items line-through">Cake</li>
</ul>

这将把事件侦听器添加到列表的所有子元素中，并在单击的元素上切换line-through类。
请记住，在操作DOM时，应该将JS代码 Package 在DOMContentLoaded事件侦听器中，以防止选择页面上尚未出现的元素。

赞(0）回复(0）举报 2023-01-24

我来回答

如何在Javascript中通过DOM事件切换列表元素

1条答案

相关问题

热门标签

最新问答