JavaScript待办应用模态框保存时如何传递任务ID参数

你当前遇到的核心问题是打开模态框时获取到的任务索引没有做持久化存储，导致点击保存按钮时无法读取对应值，以下是3种易落地、无额外依赖的实现方式：

方案1：通过模态框自定义属性存储当前编辑ID（最推荐，实现成本最低） #

打开模态框填充内容时，直接把当前任务ID存在模态框元素的data-*自定义属性上，点击保存时直接从模态框读取该值即可，不需要额外维护全局变量。

代码修改步骤： #

1. 调整打开模态框的点击监听逻辑，给模态框增加自定义属性存储索引，同时优化父元素查找逻辑避免取值错误：

document.getElementById('project-content').addEventListener('click', (e) => {
  const modal = document.getElementById('todo-modal');
  // 向上递归查找匹配的任务内容容器，避免嵌套元素导致父级ID取错
  const taskContentEl = e.target.closest('.task-content');
  if(!taskContentEl) return;
  const taskId = taskContentEl.id;

  if(e.target.classList.contains('task-title') || e.target.classList.contains('task-description')) {
    // 将当前编辑的任务ID存入模态框自定义属性
    modal.dataset.currentTaskId = taskId;
    displayController.populateModal(taskId); 
    displayController.openModal(modal);
  }
})

2. 修改保存按钮的监听逻辑，直接从模态框读取存储的ID：

saveModalBtn.addEventListener('click', () => {
  const modal = document.getElementById('todo-modal');
  // 读取自定义属性存储的索引，转成数字类型匹配数组索引要求
  const index = Number(modal.dataset.currentTaskId);

  store.updateTaskInStore(index);
  displayController.updateTaskInUI(index);
  
  // 保存完成后清空属性，避免下次打开模态框出现值串用
  delete modal.dataset.currentTaskId;
});

优化说明：原逻辑中用e.target.parentElement.id取ID存在兼容隐患，如果后续在任务标题、描述区域增加嵌套元素（比如编辑图标、优先级标签），parentElement就不再是.task-content容器，会导致ID取值失败，closest()方法会向上递归查找匹配的祖先元素，鲁棒性更强。

方案2：用模块级变量缓存当前编辑的任务ID #

如果不想修改DOM属性，可以在事件监听的同作用域下声明一个专用变量，打开模态框时给变量赋值，保存时直接读取变量值即可：

// 在事件监听同作用域声明缓存变量，不要挂载到window上避免全局污染
let currentEditingTaskId = null;

document.getElementById('project-content').addEventListener('click', (e) => {
  const modal = document.getElementById('todo-modal');
  const taskContentEl = e.target.closest('.task-content');
  if(!taskContentEl) return;
  const taskId = taskContentEl.id;

  if(e.target.classList.contains('task-title') || e.target.classList.contains('task-description')) {
    // 缓存当前编辑的任务ID
    currentEditingTaskId = Number(taskId);
    displayController.populateModal(taskId); 
    displayController.openModal(modal);
  }
})

saveModalBtn.addEventListener('click', () => {
  if(currentEditingTaskId === null) return;
  const index = currentEditingTaskId;

  store.updateTaskInStore(index);
  displayController.updateTaskInUI(index);
  
  // 操作完成后重置缓存值
  currentEditingTaskId = null;
});

方案3：动态绑定/解绑保存按钮事件（不推荐，维护成本高） #

打开模态框时给保存按钮绑定携带当前ID闭包的点击事件，关闭模态框时再解绑该事件。这种方式容易出现事件重复绑定、多次触发的问题，没有特殊需求不优先使用。

额外优化提示 #

你当前直接用数组索引作为任务DOM的ID存在潜在bug：如果删除数组中间的任务，后面所有任务的索引都会前移，对应DOM上的ID就会和数组内的任务对象不匹配。长期维护建议给每个任务生成全局唯一ID（比如时间戳、crypto.randomUUID()），数组操作时通过唯一ID匹配对应任务，删除、排序操作都不会出现匹配错误。

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