css - 对共享相同类名但仅对触发事件的特定元素设置样式的多个 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.

我有删除任务按钮来处理每个单独的任务，但似乎无法让事件绑定(bind)在复选框上正常工作。 它适用于所有卡片，但仅当只有一个任务需要“勾选”时，一旦您添加另一个任务，它仅适用于刚刚添加的最新任务并停止处理所有之前的任务？

我曾尝试在 if 语句及其代码块中使用 event.target 作为条件，以便它只能在“特定”复选框上运行代码块，而不仅仅是在“任何”复选框上运行(如果有意义的话)。 我还认为事件委托(delegate)可能存在问题，因为事件监听器设置在“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

I expect to check & uncheck the checkbox for a given task and it applies the text-decoration: line-through or text-decoration: none to its associated task element.

如果我正确理解了您的问题，那么您使用 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>