为具有相同类名的多个DOM元素设置样式，但仅设置触发事件的特定元素的样式？

Question

编辑：我找到了这个解决方案：

task_container.addEventListener('click', checkBox);

    function checkBox (event) {
        if (event.target.className === 'check' ) {

            var nearest_task = event.target.parentElement.previousSibling.children[0];

            if (event.target.checked === true) {
                nearest_task.style.textDecoration = 'line-through';
                nearest_task.style.textDecorationColor = 'tomato';
            } else if (event.target.checked === false) {
                nearest_task.style.textDecoration = 'none';
            }

       }
    }

请在下面提供任何优化/替代解决方案。我制作了一个待办事项列表Web应用程序，该应用程序创建具有各自相关任务的列表卡。我这样做是为了在您将任务添加到指定的列表卡时将其与“任务复选框”和“删除任务按钮”一起添加到列表卡中。This is an image of the checkbox being checked and not applying the specified style to each associated task.

我获得了删除任务按钮来处理每个单独的任务，但是似乎无法使事件绑定在复选框上正常工作。它适用于所有卡，但是仅当只有一个任务要“检查”时才添加，一旦添加了另一个任务，它仅适用于刚刚添加的最新任务，而停止处理所有先前的任务？

我已经尝试过在event语句及其代码块中使用event.target作为条件，以便在有意义的情况下，它只能在“特定”复选框而不是“任何”复选框上运行代码块。我还认为事件委托可能存在问题，因为事件侦听器是在“ check”变量上设置的，而不是在DOM树上较高的节点上设置的，该节点可以侦听所有单击事件，但是当我这样做时，它将完全停止工作。

看来事件触发正确，但它可能是if / else条件语句中的任务变量，未正确应用文本修饰？

add_task.addEventListener('click', function () {


                // Checks to see if there was no input
                if (input_task.value === '') {
                    alert('Please enter a task.');
                }

                // Checks to see if the input is only WHITESPACE
                else if (input_task.value.match(/^\s*$/)) {
                    // Clears '.input-task' input field
                    input_task.value = '';
                    alert('WHITESPACE-ONLY is not allowed.');
                } 

                else if (task_list.childElementCount <= 7) {

                    // Creates '.task_container' div element
                    task_container = document.createElement('div');
                    task_container.className = 'task-container';
                    task_list.appendChild(task_container);

                    // Creates '.task-wrapper' div element
                    task_wrapper = document.createElement('div');
                    task_wrapper.className = 'task-wrapper';
                    task_container.appendChild(task_wrapper);

                    // Creates '.task' li element
                    task = document.createElement('li');
                    task.className = 'task';
                    task.textContent = input_task.value;
                    input_task.value = '';
                    task_wrapper.appendChild(task);

                    option_wrapper = document.createElement('div');
                    option_wrapper.className = 'option-wrapper';
                    task_container.appendChild(option_wrapper);

                    // Creates 'check' input(checkbox) element
                    check = document.createElement('input');
                    check.type = 'checkbox';
                    check.name = 'check';
                    check.className = 'check';
                    option_wrapper.appendChild(check);

                    check.addEventListener('click', checkBox);

                    function checkBox (event) {
                        if (event.target.className === 'check' ) {

                            var isChecked = check.checked;
                            if (isChecked) {
                                // event.target.value = 'complete';
                                task.style.textDecoration = 'line-through';
                                task.style.textDecorationColor = 'tomato';
                            } else {
                                // event.target.value='incomplete';
                                task.style.textDecoration = 'none';
                            }

                        }
                    }


                    // Creates 'trash' button element
                    trash = document.createElement('button');
                    trash.className = 'trash';
                    trash.textContent = 'Delete';
                    option_wrapper.appendChild(trash);

                    trash.addEventListener('click', function () {
                        event.target.closest('.task-container').remove();
                    });

                }

我希望选中并取消选中给定任务的复选框，它将text-decoration: line-through或text-decoration: none应用于与其关联的任务元素。但是，如前所述，当列表中有多个任务时，这似乎并不适用。它仅适用于最新的附加任务吗？

Answer 1

我希望选中并取消选中给定任务的复选框，将text-decoration: line-through或text-decoration: none应用于及其相关的任务元素。

如果我正确理解了您的问题，那么使用event.target可以使您处于正确的轨道。

通过使用事件侦听器onchange而不是onclick，可以确保仅在选中或未选中复选框时才触发事件侦听器。

然后您可以使用classList.toggle()在复选框的父级上切换类。

工作示例：

const taskList = document.getElementsByClassName('tasklist')[0];

const updateTaskStatus = (event) => {
  event.target.parentNode.classList.toggle('done');
}

taskList.addEventListener('change', updateTaskStatus, false);

.done {
  color: rgb(191, 191, 191);
  text-decoration: line-through;
}

<form>
<ul class="tasklist">
<li><input type="checkbox" /> Task 1</li>
<li><input type="checkbox" /> Task 2</li>
<li><input type="checkbox" /> Task 3</li>
</ul>
</form>