classList.toggle() 行为异常

Question

我正在尝试通过创建这个非常简单的待办事项应用程序来学习 Javascript。我可以在输入中输入一些值。当按下回车或提交按钮时，输入标签中的值将作为列表添加到 ul 中。然后将 class 'list-item' 添加到该 li 标签。

我的问题是：我想在单击时跨越任何单个列表。我为此使用了以下代码。我的 CSS 中有 'cross' 样式，但问题是我的代码没有跨越每个单独的列表。它穿过所有其他的。我也尝试了forEach，结果是一样的。

const listItems = document.querySelectorAll('list-item');

for (let i=0; i<listItems.length; i++) {
    
    listItems[i].addEventListener('click', function() {
        console.log(listItems[i])
        listItems[i].classList.toggle('cross');
    })
}

我的全部 javascript :

const input = document.getElementById('main-input')
const submit = document.getElementById('submit')
const ul = document.getElementById('to_dos');
const del = document.getElementById('del')

//clicking submit button
submit.addEventListener('click', function() {
    addList()
})

//pressing enter key
input.addEventListener("keypress", function(event) {
    if(event.keyCode === 13) {
        event.preventDefault()
        addList()
        
    }
})

//add new todo in the list from input
const addList = () => {
    const newToDo = document.createElement('LI')
    newToDo.classList.add('list-item')
    newToDo.appendChild(document.createTextNode(input.value))
        
        
    ul.appendChild(newToDo)
    input.value = "" 
    
    //cross the completed tasks
    const listItems = document.querySelectorAll('li.list-item');
    
    for (let i=0; i<listItems.length; i++) {
        
        listItems[i].addEventListener('click', function() {
            console.log(listItems[i])
            listItems[i].classList.toggle('cross');
        })
    }


    //delete button
    del.addEventListener('click', function() {
        const completedItems = document.querySelectorAll('.cross');
        completedItems.forEach(
            completedItem => {
                completedItem.classList.add('hide')
            }
        )
    })
}

Answer 1

在您的代码笔中，您错误地分配了点击侦听器。不是将侦听器单独附加到每个添加的项目，而是在每次添加新项目时循环遍历所有项目 - 当您像这样复合事件侦听器时，它可能会产生不良结果。

在您的 addList 函数中，而不是循环遍历所有输入：

        //cross the completed tasks
        const listItems = document.querySelectorAll('li');
        
        listItems.forEach(listItem => listItem.addEventListener('click', e => {
            e.target.classList.toggle('cross');
        }))

只需将侦听器附加到新添加的侦听器即可：

        newToDo.addEventListener('click', e => {
            e.target.classList.toggle('cross');
        })

示例：https://codepen.io/chayashital/pen/jOGaWgJ#_=_

Answer 2

您只是忘记在 querySelectorAll 方法的开头添加点 (.)。在您的情况下，您告诉 querySelectorAll 方法查找所有 list-item 标记，这样点将改变查找所有 list 的含义-itemclass。 querySelectorAll 将 return HTMLCollection 而不是 Array 所以 forEach 方法将不起作用，您应该使用 Array() 函数或以下方式 return 将其 Array 。

[...document.querySelectorAll('.list-item')]
.forEach(function(element){
    element.addEventListener("click", function(){
        element.classList.toggle("cross")
})
})

classList.toggle() 行为异常

classList.toggle() behaves strange

javascript

jquery

dom

queryselector