在 JavaScript 中移动 TodoList 中的“正在进行”任务如何解决？

javascript 中使用 dom 更新 todolist

在您的问题中，您遇到了在使用 javascript 通过 dom 更新 todolist 时遇到困难的问题。具体来说，您无法将“正在进行”的任务移动到“已完成”部分。

问题原因

在您提供的 javascript 代码中，拼写错误导致“正在进行”任务无法移动到“已完成”部分。您在事件侦听器和数据属性中拼写了“form”而不是“from”。

立即学习“Java免费学习笔记（深入）”；

解决方案

启科PHP淘宝客系统

1、请上传下载到的淘宝客系统安装包并上传到空间根目录中进行解压，解压后将网站文件移动到根目录的位置，然后访问 /install 进行安装。您也可以在本地解压，并以二进制方式将程序上传至您的网站空间。 2、同意启科网络电子商务系统安装协议进入下一步。 3、如果系统检测环境通过，则会提示输入您的数据库服务器地址（一般为本机，即127.0.0.1或者localhost）、数据库账号、数据库密码、数据库名

下载

将代码中的所有“form”拼写替换为“from”。修改后的代码如下：

contentdom.addeventlistener("change", (event) => {
  let target = event.target;
  if (target.dataset.from === "todo" && target.tagname === "input") {
    let index = +target.dataset.index;
    // 删除这一项
    let value = data.todoarr.splice(index, 1)[0];
    // 添加到已完成
    data.donearr.push(value);
    render(data);
  } else if (target.dataset.from === "done" && target.tagname === "input") {
    let index = +target.dataset.index;
    let value = data.donearr.splice(index, 1)[0];
    data.todoarr.push(value);
    render(data);
  }
});

更新后的代码示例

修改后的代码如下：

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.from === "todo" && target.tagName === "INPUT") {
      let index = +target.dataset.index;
      // 删除这一项
      let value = data.todoArr.splice(index, 1)[0];
      // 添加到已完成
      data.doneArr.push(value);
      render(data);
    } else if (target.dataset.from === "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.from === "todo" && target.tagName === "IMG") {
      let index = +target.dataset.index;
      data.todoArr.splice(index, 1);
      render(data);
    } else if (target.dataset.from === "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 += `
        

            
            ${todoArr[i]}
            @@##@@
        
`;
  }

  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.from = "done";

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

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

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

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

其他建议

如果您遇到类似问题，请尝试以下步骤：

• 仔细检查您的代码中是否有拼写错误或语法错误。
• 使用调试器或 console 日志来帮助您跟踪代码中的执行流程。
• 将您的代码分解成较小的块，这样更容易识别和隔离问题。
• 寻求来自其他开发人员的帮助或在在线论坛上发布问题。