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。

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

1 个答案: