使用 DOM 将任务归类到已完成状态问题：为什么勾选待办事项复选框无法将任务自动移至已完成列表？

各位小伙伴们，大家好呀！看看今天我又给各位带来了什么文章？本文标题是《使用 DOM 将任务归类到已完成状态问题：为什么勾选待办事项复选框无法将任务自动移至已完成列表？ 》，很明显是关于文章的文章哈哈哈，其中内容主要会涉及到等等，如果能帮到你，觉得很不错的话，欢迎各位多多点评和分享！

使用 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 += `
        <li>
            &lt;input type=&quot;checkbox&quot; id=&quot;checkb&quot; data-form=&quot;todo&quot; data-index=&quot;${i}&quot;&gt;
            <span>${todoArr[i]}</span>
            <img src="${imgSrc}" data-form="todo" data-index="${i}">
        </li>`;
    }

    todoContainer.innerHTML = todoHTML;

    //通过DOM API
    let doneArr = data.doneArr;
    for (let i = 0, len = doneArr.length; i < len; i++) {
        let li = document.createElement("li");
        let input = document.createElement("input");
        input.type = "checkbox";
        input.setAttribute("checked", "");
        input.dataset.index = i;
        input.dataset.form = "done";

        let span = document.createElement("span");
        span.textContent = doneArr[i];

        let img = document.createElement("img");
        img.src = imgSrc;
        img.dataset.index = i;
        img.dataset.form = "done";

        li.appendChild(input);
        li.appendChild(span);
        li.appendChild(img);
        doneContainer.appendChild(li);
    }
}

//在文档完全加载后触发load事件
window.onload = main;

对代码进行这些修改后，勾选待办事项复选框将按预期将任务移至已完成列表。

终于介绍完啦！小伙伴们，这篇关于《使用 DOM 将任务归类到已完成状态问题：为什么勾选待办事项复选框无法将任务自动移至已完成列表？ 》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！