javascript - 在 JavaScript 中获取选中复选框的唯一父级的子级(或选中复选框的兄弟级)
问题描述
我正在用香草 JavaScript 创建一个待办事项应用程序。
我将每个待办事项的 id 和值存储在本地存储中。以及一个布尔值,指定是否选中了 todo 的相应复选框。
只要未单击任何复选框,此方法就可以完美运行。
这是本地存储的示例 -
"{\"toDo1630557891826\":\"Clean bedroom false\",\"toDo1630557898808\":\"Wash dishes false\"}"
然而,一旦选中了一个复选框,DOM 树中的最新值就会被放置在本地存储中的两个 todo id 旁边。例如,当我检查 DOM 中的两个复选框时。
这就是我的意思——
{ToDos: "{\"toDo1630557891826\":\"Wash dishes true\",\"toDo1630557898808\":\"Wash dishes true\"}", length: 1}
我认为发生这种情况的原因是因为当我存储检查的 todo 值时,我只是在 DOM 中检索最新的 todo 值 -
toDoContainer.addEventListener("change", (e) => {
const tgt = e.target;
const toDo = tgt.parentNode.querySelector('.input');
if (tgt.checked) {
toDo.style.textDecoration = "line-through";
toDo.style.opacity = "50%";
isChecked(toDo.value);
}
else {
toDo.style.textDecoration = "none";
toDo.style.opacity = "100%";
isChecked(toDo.value);
}
});
这行代码专门导致了这个问题 -
const toDo = tgt.parentNode.querySelector('.input');
正如我之前所说,这是获取最新的 .input (todo) 值。我需要为每个选中的复选框存储相应的值,而不覆盖本地存储中的其他 todo 值。
所以,我需要通过访问复选框的 todo 值兄弟来以某种方式存储每个 todo 的值。
我不知道该怎么做。
这是我的代码笔以获取更多上下文。当然,虽然没有本地存储-
解决方案
您可能需要考虑这一点:
toDoContainer.addEventListener("change", (e) => {
const tgt = e.target;
const chk = tgt.checked;
toDo.style.textDecoration = chk ? "line-through" : "none";
toDo.style.opacity = chk ? "50%" : "100%";
saveTodos()
});
const saveToDos = () => {
// change the global todo object (and make it an array)
toDos = [...toDoContainer.querySelectorAll("input[type=checkbox]")].map(todo => {
const checked = todo.checked
const id = todo.closest("div").id;
return { id,completed:checked }
});
localStorage.setItem("ToDos", JSON.stringify(toDos));
};
推荐阅读
- html - CSS:边框线的透明部分
- python - 已安装的模块可从 python3 访问但不能从 2.7 访问?
- three.js - 为什么立方体并不总是使用 three.js 进行动画处理
- javascript - 尝试在新标签加载时滚动到目标 ID
- powershell - 使用 powershell 脚本重新启动 apache tomcat 服务
- javascript - SVG 边框在拖动时变得模糊
- csv - 使用 Apache-NiFi 验证字符串长度
- php - 无法获取某个类别的 wordpress 帖子
- java - 数组列表错误
- ios - 从 firebase swift ios 应用程序中获取所有数据