JavaScript仅对onclick元素应用classList.toggle

我的待办事项列表应用程序中有一个生成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;
        } 

我想在这里使用“this”关键字，对吗？我尝试了一系列不同的语法，但无法仅针对使用“checked”类单击的元素

---

非常感谢。

我建议删除内联的

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

class的单击元素才能应用

checked

class

---

您可以阅读更多关于

addEventListener

的信息，最好的建议是停止使用内联

onclick

并使用不引人注目的事件侦听器。您在代码（大约2016年）和1990年代的事件方法中使用了非常现代的ES6 spread运算符感谢您，这是一个有效的解决方案和更干净的编写方法。

// 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')
  }
})