选中复选框并将样式应用于相应的输入值

Question

我在香草JavaScript创建一个待办事项列表。现在，当相应的复选框被选中时，我正试图将样式应用于todo。

toDoContainer.addEventListener("change", function(e) {
const tgt = e.target;
if (tgt.classList.contains("checkbox")) {
let toDo = tgt.closest("input").classList.contains("input");
if (toDo.value !== "") {
toDo.style.opacity = "50%";
}
}
});

现在，什么都没有发生，我也没有得到一个错误。

我使用了nearest()方法，因为复选框和todo都是DOM中紧挨着的输入。

在我使用这个代码之前-

allCheckboxes.forEach(box => {
box.addEventListener("change", () => {
if (box.checked) {
for (let toDo = 0; toDo < allToDos.length; toDo++) {
if (allToDos[toDo].value) {
allToDos[toDo].style.textDecoration = "line-through";
allToDos[toDo].style.opacity = "50%";
}
}
}
else {
console.log("cat");
for (let toDo = 0; toDo < allToDos.length; toDo++) {
if (allToDos[toDo].value) {
allToDos[toDo].style.textDecoration = "none";
allToDos[toDo].style.opacity = "100%";
}
}
}
})
})

我能够将样式应用于输入，但只有当节点列表中的第一个复选框被选中时。选中复选框还将样式应用于DOM中的所有todo，而不仅仅是我想要的对应的todo。

我刚刚注意到的另一个怪癖是，当我查看开发工具是否记录复选框时，当有多个复选框可见时，它显示一个空节点列表-[]。

document.getElementById("add").addEventListener("click", () => {
console.log(allCheckboxes);
});

如何在选中复选框时仅对相应的todo应用样式?

* * * * * *编辑——https://codepen.io/harri-greeves/pen/LYLEKNj

Answer 1

我使用了最接近()方法，因为复选框和待办事项都是在DOM中紧挨着的输入。

最接近的方法先搜索元素本身，然后再搜索元素的祖先，沿着dom树向上移动。

我不认为.closest可以用来瞄准兄弟姐妹。

https://api.jquery.com/closest/

Answer 2

问题在网上:

const allCheckboxes = toDoContainer.querySelectorAll("[type=checkbox]");

querySelector返回不存在的html集合。这意味着它将不包括动态添加的待办事项。

更好的方法是监听父节点:todoContainer，然后操作状态。

Answer 3

添加此函数

function ChangeOpacity() {
let checkbox = document.getElementsByClassName("checkbox");
let input = document.getElementsByClassName("input");
for (let i = 0; i < checkbox.length; i++) {
checkbox[i].addEventListener("change",()=>{
if (checkbox[i].checked == true) {
if (input[i].value) {
input[i].style.opacity = "50%"
input[i].style.textDecoration = "line-through"
}
else{
input[i].style.opacity = "100%"
input[i].style.textDecoration = "none"
}
} else {
if (input[i].value) {
input[i].style.opacity = "50%"
input[i].style.textDecoration = "line-through"
}
else{
input[i].style.opacity = "100%"
input[i].style.textDecoration = "none"
}
}

})

}
}
ChangeOpacity()

，然后将此函数调用到createToDo函数一切都应该正常运行，这样更干净