JS待办事项筛选标签切换时状态异常问题求助

核心问题定位 #

这类问题的根源几乎都是数据源与DOM状态不同步：

• 切换筛选标签时，直接重新渲染DOM但未基于最新数据源更新
• 修改任务完成状态时，仅修改了DOM元素的样式/类名，未同步更新背后的任务数据源（比如存储任务的数组）

具体修复步骤 #

1. 修改任务状态时同步更新数据源 #

点击完成/取消完成按钮时，必须同时修改存储任务的数组中对应项的completed属性，而非仅操作DOM：

// 示例：切换任务完成状态的处理函数
function toggleTaskCompletion(taskId) {
  // 找到目标任务并更新数据源
  const targetTask = tasks.find(task => task.id === taskId);
  if (targetTask) {
    targetTask.completed = !targetTask.completed;
  }
  // 调用渲染函数重新生成任务列表
  renderTasks(currentFilter);
}

2. 用筛选条件驱动统一DOM渲染 #

不要手动控制任务项的显示/隐藏，每次切换标签时，根据当前筛选规则从数据源过滤任务，再重新渲染整个列表：

// 存储当前筛选状态的变量
let currentFilter = 'all';

// 根据筛选条件过滤任务
function getFilteredTasks() {
  switch(currentFilter) {
    case 'done':
      return tasks.filter(task => task.completed);
    case 'todo':
      return tasks.filter(task => !task.completed);
    default:
      return [...tasks]; // 返回副本避免修改原数组
  }
}

// 统一渲染任务列表的函数
function renderTasks() {
  const taskListEl = document.getElementById('task-list');
  const filteredTasks = getFilteredTasks();
  
  // 清空现有列表后重新生成
  taskListEl.innerHTML = '';
  filteredTasks.forEach(task => {
    const taskItem = document.createElement('li');
    taskItem.className = task.completed ? 'task-completed' : '';
    // 组装任务内容与操作按钮
    taskItem.innerHTML = `
      <span>${task.content}</span>
      <button onclick="toggleTaskCompletion(${task.id})">
        ${task.completed ? '取消完成' : '标记完成'}
      </button>
    `;
    taskListEl.appendChild(taskItem);
  });
}

// 切换筛选标签的处理函数
function switchFilter(filterType) {
  currentFilter = filterType;
  renderTasks();
}

3. 禁用手动DOM显示控制逻辑 #

删除所有通过style.display或类名手动隐藏/显示任务项的代码，完全依赖渲染函数基于数据源生成DOM，避免出现状态回滚问题。

4. 验证数据源同步情况 #

修改任务状态后，通过console.log(tasks)查看数组内任务的completed属性是否正确更新，确保数据源与DOM状态完全匹配。

内容的提问来源于stack exchange，提问作者maverick