我正在嘗試通過創建這個非常簡單的待辦事項應用程式來學習 Javascript。我可以在輸入中輸入一些值。當按下 enter 或 submit 按鈕時，來自 input 標簽的值將作為串列添加到 ul 中。然后將類“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')
}
)
})
}
uj5u.com熱心網友回復：
您只是忘記在querySelectorAll方法的開頭添加點 (.) 。在您的情況下，您告訴querySelectorAll方法查找所有串列項標簽，以便點將更改查找所有串列項類的含義。并且querySelectorAll將回傳HTMLCollection而不是Array，因此forEach方法將不起作用，您應該使用Array()函式或以下方式將其回傳到Array。
[...document.querySelectorAll('.list-item')]
.forEach(function(element){
element.addEventListener("click", function(){
element.classList.toggle("cross")
})
})
uj5u.com熱心網友回復：
在您的 codepen 中，您錯誤地分配了點擊偵聽器。不是將偵聽器單獨附加到每個添加的專案，而是在每次添加新專案時回圈遍歷所有專案 - 當您復合這樣的事件偵聽器時，可能會產生不良結果。
在您的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#_= _
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/392416.html
標籤：javascript 查询 dom 查询选择器
上一篇：如何獲取上一個ul的id