我是這個領域的絕對初學者。我正在做的是一個小的待辦事項串列頁面。我被困在下面的“按鈕事件”部分。
在代碼中，我想將“完成”類切換到單擊按鈕的祖先 div。但是，它似乎只適用于某些元素。這意味著，如果“finishBtn”變數的節點串列具有奇數長度，則類串列僅針對偶數索引切換，反之亦然。
例如，如果 nodelist.length = 3，則類串列僅針對 nodelist[0] 和 nodelist[2] 切換。
（但是，對于 removeBtn 變數，它作業得很好）
非常感謝您的寶貴時間。我真的很感激你的每一個回復。因為我被這該死的東西困了好幾個小時。
addBtn.addEventListener('click', (e)=> {
e.preventDefault();
if(input.value === ''){
return;
}
// adding elements to the body;
const eachTodo = document.createElement('div');
eachTodo.classList.add('eachTodo');
const textName = document.createElement('p');
textName.textContent = input.value;
const btns = document.createElement('div');
btns.classList.add('btns');
const finish = document.createElement('button');
finish.classList.add('finish');
finish.textContent = 'Finish';
const remove = document.createElement('button');
remove.classList.add('remove');
remove.textContent = 'Remove';
btns.append(finish, remove);
eachTodo.append(textName, btns);
plansDiv.append(eachTodo);
input.value = '';
//button Events
const finishBtn = document.querySelectorAll('.finish');
const removeBtn = document.querySelectorAll('.remove');
finishBtn.forEach(btn => {
btn.addEventListener('click', ()=>{
btn.parentElement.parentElement.classList.toggle('completed');
})
})
removeBtn.forEach(btn => {
btn.addEventListener('click', ()=>{
btn.parentElement.parentElement.remove();
})
})
})
這是我的 CSS 部分
.completed p {
text-decoration: line-through;
opacity: 0.8;
}
uj5u.com熱心網友回復：
就目前而言，您正在查詢每個按鈕上的所有按鈕add并向它們添加新的偵聽器，這會導致每個按鈕上的重復偵聽器按順序觸發。
附加了偶數個偵聽器的元素將切換類偶數次并回傳初始值。
"on" toggle-> "off" toggle-> "on"
具有奇數個附加偵聽器的元素將類切換奇數次并在最后顯示正確。
"on" toggle-> "off" toggle-> "on" toggle-> "off"
（它適用于 Remove，因為第一個偵聽器洗掉了元素，隨后的 Removes 不會改變它。）
每個按鈕只添加一次監聽器
您可以通過簡單地將偵聽器直接添加到新創建的按鈕來避免這種情況。您已經在腳本中參考了每個button及其父元素 ( eachTodo)，因此您可以直接將偵聽器添加到它們并直接參考父元素。
finish.addEventListener('click', () => {
eachTodo.classList.toggle('completed');
});
remove.addEventListener('click', () => {
eachTodo.remove();
});
顯示代碼片段
const addBtn = document.getElementById('addBtn');
const plansDiv = document.getElementById('plansDiv');
const input = document.getElementById('input');
addBtn.addEventListener('click', (e) => {
e.preventDefault();
if (input.value === '') {
return;
}
// adding elements to the body;
const eachTodo = document.createElement('div');
eachTodo.classList.add('eachTodo');
const textName = document.createElement('p');
textName.textContent = input.value;
const btns = document.createElement('div');
btns.classList.add('btns');
const finish = document.createElement('button');
finish.classList.add('finish');
finish.textContent = 'Finish';
const remove = document.createElement('button');
remove.classList.add('remove');
remove.textContent = 'Remove';
btns.append(finish, remove);
eachTodo.append(textName, btns);
plansDiv.append(eachTodo);
input.value = '';
// Add listeners directly
finish.addEventListener('click', () => {
eachTodo.classList.toggle('completed');
})
remove.addEventListener('click', () => {
eachTodo.remove();
})
}).completed p {
text-decoration: line-through;
opacity: 0.8;
}<input type="text" id="input">
<button type="button" id="addBtn">Add</button>
<div id="plansDiv"></div>事件委托
更簡潔的解決方案是使用事件委托并在添加到document. 這里替換parentElement為closest('.eachTodo')避免特定祖先深度的脆弱性，并使用 . 檢查單擊了哪個按鈕Element.matches()。
document.addEventListener('click', (e) => {
if (e.target.matches('button.finish')){
e.target.closest('.eachTodo').classList.toggle('completed');
}
if (e.target.matches('button.remove')){
e.target.closest('.eachTodo').remove();
}
});
顯示代碼片段
const addBtn = document.getElementById('addBtn');
const plansDiv = document.getElementById('plansDiv');
const input = document.getElementById('input');
document.addEventListener('click', (e) => {
if (e.target.matches('button.finish')){
e.target.closest('.eachTodo').classList.toggle('completed');
}
if (e.target.matches('button.remove')){
e.target.closest('.eachTodo').remove();
}
});
addBtn.addEventListener('click', (e) => {
if (input.value === '') {
return;
}
// adding elements to the body;
const eachTodo = document.createElement('div');
eachTodo.classList.add('eachTodo');
const textName = document.createElement('p');
textName.textContent = input.value;
const btns = document.createElement('div');
btns.classList.add('btns');
const finish = document.createElement('button');
finish.classList.add('finish');
finish.textContent = 'Finish';
finish.type = 'button';
const remove = document.createElement('button');
remove.classList.add('remove');
remove.textContent = 'Remove';
remove.type = 'button';
btns.append(finish, remove);
eachTodo.append(textName, btns);
plansDiv.append(eachTodo);
input.value = '';
});.completed p {
text-decoration: line-through;
opacity: 0.8;
}<input type="text" id="input">
<button type="button" id="addBtn">Add</button>
<div id="plansDiv"></div>請注意，您還可以e.preventDefault()通過指定type="button"何時創建按鈕來避免必要性。請參閱：按鈕元素：型別
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/468505.html
標籤：javascript 前锋 切换