JavaScript仅将classList.toggle应用于onclick元素

Question

我的待办事项列表应用程序中有一个函数，它可以生成我的HTML:

function updateResults() {
listItems = todos.reduce((result, item) => {
result += `<li class="todo">${item}<div class="controls">
<span class="check" onclick="checkItem()"></span><span class="delete">&#x1F5D1</span></div></li>`;
return result;
}, '');
resultElement = document.getElementById('result');
// Set inner HTML
resultElement.innerHTML = listItems;
} 

当在其中一个生成的项目上单击"检查"范围时，我只希望检查该项目，但一次只能切换所有列表项目。

function checkItem() {
[...document.getElementsByClassName('check')].forEach(function (item) {
item.classList.toggle('checked');
});
}

我想在这里使用"this"关键字，对吗？我尝试了很多不同的语法，但都无法仅针对用"checked"类单击的元素。

谢谢。

Answer 1

我建议删除内联onclick(和您的checkItem函数(并创建一个类似的事件列表中心

// listen to all clicks on your page
window.addEventListener('click', (event) => {
// if the clicked element has a class named check
if (event.target.classList.contains('check')) {
// remove or add the class checked only from this element
event.target.classList.toggle('checked')
}
})

这样，只有具有check类的单击元素才能应用checked类。

您可以在MDN上阅读更多关于addEventListener的信息。