在 JavaScript 中移动 TodoList 中的“正在进行”任务如何解决？-css教程-PHP中文网

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

javascript 中使用 dom 更新 todolist

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

问题原因

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

解决方案

Video Dubbing

唯一使用VoxCPM的中文配音技能，外语视频一键中文配音，支持硬字幕检测、断点续传、智能BGM。适用场景：外语视频配音、视频翻译、多语言本地化。

下载

将代码中的所有“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 
            <input type="checkbox" id="checkb" data-from="todo" data-index="${i}"><span>${todoArr[i]}</span>
            @@##@@
        `;
  }

  todoContainer.innerHTML = todoHTML;

  // 通过 DOM API
  let doneArr = data.doneArr;
  for (let i = 0, len = doneArr.length; i <p><strong>其他建议</strong></p><p>如果您遇到类似问题，请尝试以下步骤：</p>