使用 dom 将任务归类到已完成状态
问题：在实现的待办事项列表中，已完成的任务无法通过勾选复选框自动归类到已完成列表。
解决方案：
问题出现在给复选框设置 data-from 属性时拼写错误。应将其拼写为 data-form 而不是 data-from。
相关代码（已修改）：
let data = { todoArr: [], doneArr: []};function main() { let storage = localStorage.getItem("todo"); if (storage !== null) { data = JSON.parse(storage); render(data); } //获取按钮DOM let addBtn = document.getElementById("add-btn"); //获取input DOM let titleInput = document.getElementById("title"); //为按钮增加click事件监听 addBtn.addEventListener("click", (event) => { if (titleInput.value) { data.todoArr.push(titleInput.value); render(data); titleInput.value = ""; } }); //获取容器DOM let contentDom = document.getElementById("content"); //通过事件代理的方式，监听input派发的change事件 contentDom.addEventListener("change", (event) => { let target = event.target; if (target.dataset.form === "todo" && target.tagName === "INPUT") { let index = +target.dataset.index; //删除这一项 let value = data.todoArr.splice(index, 1)[0]; //添加到done data.doneArr.push(value); render(data); } else if (target.dataset.form === "done" && target.tagName === "INPUT") { let index = +target.dataset.index; let value = data.doneArr.splice(index, 1)[0]; data.todoArr.push(value); render(data); } }); //通过事件代理的方式，监听tag派发的click事件 contentDom.addEventListener("click", (event) => { let target = event.target; if (target.dataset.form === "todo" && target.tagName === "IMG") { let index = +target.dataset.index; data.todoArr.splice(index, 1); render(data); } else if (target.dataset.form === "done" && target.tagName === "IMG") { let index = +target.dataset.index; data.doneArr.splice(index, 1); render(data); } });}let imgSrc = "https://ts1.cn.mm.bing.net/th/id/R-C.f1d02b4e59751fba384245ebf3c42688?rik=xMnkkxisjTQERA&riu=http%3a%2f%2fcdn.onlinewebfonts.com%2fsvg%2fimg_513596.png&ehk=gUYMqjE9AcyrMbJullahgYyLu0QYUGZPs0Gm%2f8%2bn4Nc%3d&risl=&pid=ImgRaw&r=0";function render(data) { localStorage.setItem("todo", JSON.stringify(data)); //先清空内容 let todoContainer = document.getElementById("todoList"); todoContainer.innerHTML = ""; let doneContainer = document.getElementById("doneList"); doneContainer.innerHTML = ""; //直接拼接HTML let todoArr = data.todoArr; let todoHTML = ""; for (let i = 0, len = todoArr.length; i < len; i++) { todoHTML += ` 对代码进行这些修改后，勾选待办事项复选框将按预期将任务移至已完成列表。
以上就是使用 DOM 将任务归类到已完成状态问题：为什么勾选待办事项复选框无法将任务自动移至已完成列表？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1556615.html
微信扫一扫 
支付宝扫一扫 
