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

Question

我有一个列表，其中包含 a 中的三个元素。 我正在尝试打开和关闭 CSS class，它会在单击列表元素时触发文本。 我创建了一个 function 并使用 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 以在发生“点击”事件时根据索引从列表中切换数组元素

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。 如果是，运行 function 并切换列表 [i]。 如果不是，则 i++ 并验证下一个。

问题是现在它立即将切换添加到列表中的第一个和最后一个项目。 我也尝试过使用querrySelectorAll("li")但它说 list[i] 未定义，我不明白为什么，因为在控制台中验证 list[0] 时它显示第一个元素。

Answer 1

您可以重构您的代码并使用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 class。

请记住，在操作 DOM 时，您应该将 JS 代码包装在DOMContentLoaded事件侦听器中，以防止选择页面上尚不存在的元素。