设置共享相同类名但仅设置触发事件的特定元素的样式的多个 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 应用程序，该应用程序使用自己的相关任务创建列表卡。我这样做是这样，当您将任务添加到指定的列表卡时，它会将其与"任务复选框"和"删除任务按钮"一起附加到列表卡中。
这是复选框正在选中且未将指定样式应用于每个关联任务的图像。

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

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