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

一分耕耘，一分收获！既然打开了这篇文章《在 JavaScript 中移动 TodoList 中的“正在进行”任务如何解决？》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

javascript 中使用 dom 更新 todolist

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

问题原因

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

解决方案

将代码中的所有“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 += `
        <li>
            &lt;input type=&quot;checkbox&quot; id=&quot;checkb&quot; data-from=&quot;todo&quot; data-index=&quot;${i}&quot;&gt;
            <span>${todoArr[i]}</span>
            <img src="${imgSrc}" data-from="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.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 日志来帮助您跟踪代码中的执行流程。
• 将您的代码分解成较小的块，这样更容易识别和隔离问题。
• 寻求来自其他开发人员的帮助或在在线论坛上发布问题。

今天关于《在 JavaScript 中移动 TodoList 中的“正在进行”任务如何解决？》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！