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 类。

您可以阅读有关 addEventListener 的更多信息 here at MDN .