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

在TodoList应用中，我们通常会把任务分为待完成、正在进行、已完成等状态，当正在进行任务的状态发生变化时，就需要将其移动到对应的任务列表中，这个操作需要同时处理数据层和视图层的更新。

核心实现思路

移动正在进行任务的本质是修改任务的状态属性，然后根据新状态将对应的DOM元素从原列表移动到目标列表，核心分为三个步骤：

• 找到目标任务的对应数据，修改其状态值
• 根据新状态确定目标列表的DOM容器
• 将任务对应的DOM元素从原容器移动到目标容器

基础数据结构与页面结构

首先我们定义任务的数据结构，以及对应的页面列表结构：

<div class="task-container">
  <div class="task-list" id="pending-list">
    <h3>待完成任务</h3>
  </div>
  <div class="task-list" id="doing-list">
    <h3>正在进行任务</h3>
  </div>
  <div class="task-list" id="done-list">
    <h3>已完成任务</h3>
  </div>
</div>

对应的任务数组数据示例如下：

// 任务状态：pending 待完成 doing 正在进行 done 已完成
let taskList = [
  { id: 1, content: '学习JavaScript', status: 'doing' },
  { id: 2, content: '完成项目文档', status: 'pending' },
  { id: 3, content: '修复线上bug', status: 'doing' }
];

实现移动正在进行任务的方法

我们可以通过任务id找到对应的任务，修改其状态后完成移动操作：

/**
 * 移动正在进行任务到目标状态
 * @param {number} taskId 任务id
 * @param {string} targetStatus 目标状态 pending/doing/done
 */
function moveDoingTask(taskId, targetStatus) {
  // 1. 找到目标任务数据
  const targetTask = taskList.find(item => item.id === taskId);
  if (!targetTask || targetTask.status !== 'doing') {
    console.log('目标任务不存在或不是正在进行状态');
    return;
  }
  // 2. 修改任务状态
  targetTask.status = targetStatus;
  // 3. 找到任务对应的DOM元素
  const taskDom = document.querySelector(`[data-task-id="${taskId}"]`);
  if (!taskDom) {
    console.log('未找到任务对应的DOM元素');
    return;
  }
  // 4. 确定目标列表容器
  let targetContainer;
  switch(targetStatus) {
    case 'pending':
      targetContainer = document.getElementById('pending-list');
      break;
    case 'doing':
      targetContainer = document.getElementById('doing-list');
      break;
    case 'done':
      targetContainer = document.getElementById('done-list');
      break;
    default:
      console.log('无效的目标状态');
      return;
  }
  // 5. 移动DOM元素到目标容器
  targetContainer.appendChild(taskDom);
  // 可选：更新任务元素上的状态标识
  taskDom.setAttribute('data-task-status', targetStatus);
}

任务元素的渲染与事件绑定

我们需要先渲染任务列表，并且给每个任务的移动按钮绑定事件：

// 渲染任务列表
function renderTaskList() {
  // 清空所有列表
  document.getElementById('pending-list').innerHTML = '<h3>待完成任务</h3>';
  document.getElementById('doing-list').innerHTML = '<h3>正在进行任务</h3>';
  document.getElementById('done-list').innerHTML = '<h3>已完成任务</h3>';
  // 遍历任务数组渲染
  taskList.forEach(task => {
    const taskDom = document.createElement('div');
    taskDom.className = 'task-item';
    taskDom.setAttribute('data-task-id', task.id);
    taskDom.setAttribute('data-task-status', task.status);
    taskDom.innerHTML = `
      <span class="task-content">${task.content}</span>
      <div class="task-actions">
        <button class="move-pending">移到待完成</button>
        <button class="move-doing">移到正在进行</button>
        <button class="move-done">移到已完成</button>
      </div>
    `;
    // 根据状态放到对应列表
    let container;
    switch(task.status) {
      case 'pending':
        container = document.getElementById('pending-list');
        break;
      case 'doing':
        container = document.getElementById('doing-list');
        break;
      case 'done':
        container = document.getElementById('done-list');
        break;
    }
    container.appendChild(taskDom);
    // 绑定移动事件
    const buttons = taskDom.querySelectorAll('button');
    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        let targetStatus;
        if (btn.classList.contains('move-pending')) targetStatus = 'pending';
        if (btn.classList.contains('move-doing')) targetStatus = 'doing';
        if (btn.classList.contains('move-done')) targetStatus = 'done';
        moveDoingTask(task.id, targetStatus);
      });
    });
  });
}
// 初始渲染
renderTaskList();

注意事项

在实际开发中还需要注意以下几点：

• 如果使用了框架如Vue、React，不需要手动操作DOM，只需要修改任务的状态数据，框架会自动更新视图
• 如果任务数据需要持久化存储，在修改状态后需要同步更新本地存储或后端数据
• 移动操作前可以增加状态校验，避免无效的状态流转，比如已完成任务不能直接移到正在进行
• 如果任务列表有排序需求，移动后可以根据排序规则调整DOM元素的顺序

总结

移动TodoList中的正在进行任务，核心是保证数据和视图的一致性，原生JavaScript实现时需要先修改数据状态，再操作DOM完成元素移动。如果使用了前端框架，只需要关注数据层的更新即可。掌握这个逻辑后，还可以扩展到任务排序、批量移动等更多功能场景，让TodoList应用的功能更加丰富。

JavaScriptTodoList正在进行任务任务移动修改时间：2026-07-06 10:33:31