待办应用点击完成按钮仅标记首项任务问题排查

问题描述 #

• 实现需求：点击任务对应的「Complete」按钮时，为对应任务内容添加删除线，标记任务已完成
• 异常表现：无论点击哪个任务的完成按钮，始终只有列表最顶部的第一项任务被添加删除线，无法命中实际选中的目标任务
• 预期目标：通过任务唯一标识匹配对应任务，仅为选中的目标任务添加删除线样式

故障原因 #

1. 内联onclick绑定的函数未正确获取触发事件的元素上下文：原completeItem函数内使用this时，默认指向全局window对象，无法定位到当前点击按钮所属的任务
2. 元素选择逻辑错误：原deleteItem等函数直接使用document.querySelector获取元素，永远只会匹配到页面中第一个符合选择器的节点，也就是列表首项
3. 数据存储逻辑不规范：原逻辑往taskList数组中推入的是DOM节点而非结构化任务数据，无法持久化保存任务完成状态，刷新页面后状态会丢失

修复代码 #

HTML部分无需调整，仅需修正JS逻辑 #

// 节点变量声明
const el = {
  form: document.querySelector(".form"),
  input: document.querySelector(".user-input"),
  list: document.querySelector(".list"),
  date: document.querySelector(".date"),
  time: document.querySelector(".time"),
};

const STORAGE_KEY = "tasks-storage-key";

// 生成唯一任务ID
const createId = () =>
  `${Math.floor(Math.random() * 10000)}${new Date().getTime()}`;

// 初始化任务列表，从本地存储读取数据
let taskList = JSON.parse(localStorage.getItem(STORAGE_KEY) ?? "[]");

// 生成新任务数据对象
function makeNewTask() {
  const data = {
    id: createId(),
    taskNew: el.input.value,
    taskDate: el.date.value,
    taskTime: el.time.value,
    completed: false // 新增完成状态标记字段
  };
  return data;
}

// 渲染单个任务节点
function renderTask(data) {
  const taskItem = document.createElement("div");
  // 根据完成状态设置初始删除线样式
  const strikeStyle = data.completed ? 'text-decoration: line-through;' : '';
  taskItem.innerHTML = `
       <div class="task-content">
        <div class="task" data-id="${data.id}">
        <div class="new-task-created" style="${strikeStyle}">${data.taskNew}</div>
        <label class="due-date" style="${strikeStyle}">${data.taskDate}</label>
        <label class="due-time" style="${strikeStyle}">${data.taskTime}</label>
    </div>

    <div class="action-buttons">
        <button onclick="editItem('${data.id}')" class="edit" data-id="${data.id}">Edit</button>
        <button onclick="deleteItem('${data.id}')" class="delete" data-id="${data.id}">Delete</button>
        <button onclick="completeItem('${data.id}')" class="complete" data-id="${data.id}">Complete</button>
    </div>
</div>`;
  el.list.appendChild(taskItem);
}

// 全量渲染任务列表
function renderAllTasks() {
  el.list.innerHTML = '';
  taskList.forEach(task => renderTask(task));
}

// 添加新任务
function addTask() {
  if(!el.input.value.trim()) return; // 空内容不允许添加
  const newTask = makeNewTask();
  taskList.push(newTask);
  storeList();
  renderTask(newTask);
  // 添加后清空输入框
  el.input.value = '';
  el.date.value = '';
  el.time.value = '';
}

// 持久化任务数据到本地存储
function storeList() {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(taskList));
}

// 删除指定ID的任务
function deleteItem(taskId) {
  taskList = taskList.filter(task => task.id !== taskId);
  storeList();
  renderAllTasks();
}

// 编辑任务（预留逻辑可自行扩展）
function editItem(taskId){
  // 可在此处补充编辑弹窗、内容回填、保存更新的逻辑
}

// 标记任务完成/取消完成
function completeItem(taskId) {
  const targetTask = taskList.find(task => task.id === taskId);
  if(!targetTask) return;
  // 切换完成状态
  targetTask.completed = !targetTask.completed;
  storeList();
  // 更新视图
  renderAllTasks();
}

// 页面首次加载时渲染已存储的任务
renderAllTasks();

修复说明 #

• 所有操作按钮的事件绑定都传入对应任务的唯一ID，从根源上避免元素匹配错误
• 任务数据与DOM渲染分离，所有状态修改先更新数据源，再统一刷新视图，避免DOM操作与数据不同步
• 完成状态会持久化保存到localStorage，刷新页面不会丢失
• 同步修复了删除功能永远删除第一项的同类问题

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