本文详解如何利用 data 属性与 dom 动态管理，为待办事项应用实现「点击不同主任务（如 work、gym）时，仅显示其专属子任务」的核心交互逻辑，避免内容混杂，提升用户体验与代码可维护性。
本文详解如何利用 data 属性与 dom 动态管理，为待办事项应用实现「点击不同主任务（如 work、gym）时，仅显示其专属子任务」的核心交互逻辑，避免内容混杂，提升用户体验与代码可维护性。
在构建多类别待办清单（如 Work、Gym、Finances）时，关键挑战在于：同一页面需支持多个主任务入口，且每次点击仅展示该任务关联的子任务，其他任务内容应自动隐藏。原代码中所有子任务均追加至同一个 <main id="main"> 元素，导致内容叠加、无法隔离——这正是问题根源。
解决方案的核心在于 “按需创建 + 唯一激活 + 状态隔离”：
✅ 1. 主任务与子容器一一绑定（data 属性驱动）
为每个主任务标题（<h1>）分配唯一 ID（如 data="1"），并同步创建一个专属 <main> 容器，通过 data-main-for="1" 显式声明归属关系：
function displayTask(getTaskText) {
const taskID = index;
const display_task_name = document.createElement("h1");
display_task_name.setAttribute("data", taskID);
display_task_name.textContent = getTaskText;
display_task_name.addEventListener("click", function () {
// 隐藏当前活跃容器
if (currentMain) currentMain.style.display = "none";
// 查找对应子容器，若不存在则创建
const targetMain = document.querySelector(`[data-main-for="${taskID}"]`);
if (targetMain) {
currentMain = targetMain;
currentMain.style.display = "block";
} else {
currentMain = displayTaskName(taskID); // 创建新容器
}
// 视觉反馈：高亮当前选中主任务
document.querySelectorAll(".task_name").forEach(el => el.classList.remove("active"));
display_task_name.classList.add("active");
});
// ...（删除按钮等逻辑）
}✅ 2. 子任务容器动态生成与复用
displayTaskName(taskID) 不再向固定 <main> 追加内容，而是创建并返回带 data-main-for 属性的新 <main> 元素，并挂载到 #main-container：
function displayTaskName(taskID) {
const main = document.createElement("main");
main.setAttribute("data-main-for", taskID);
main.style.display = "none"; // 初始隐藏
const newTaskBtn = document.createElement("button");
newTaskBtn.textContent = "New Task";
newTaskBtn.addEventListener("click", () => {
main.appendChild(createSubTask());
});
main.appendChild(newTaskBtn);
document.getElementById("main-container").appendChild(main);
return main;
}? 关键点：每个主任务拥有独立 DOM 容器，彼此完全隔离，无需数组存储状态——DOM 即状态。
✅ 3. 子任务操作聚焦当前上下文
所有子任务增删改操作均作用于 currentMain（即当前激活的 <main>），确保行为精准无误：
function displaySubTaskInfo(subTaskInfo) {
if (!currentMain) return;
const subTaskDiv = document.createElement("div");
// ... 构建子任务元素（checkbox, name, date, edit/delete buttons）
currentMain.appendChild(subTaskDiv);
// 自动隐藏“New Task”按钮（当有子任务时）
const newTaskBtn = currentMain.querySelector("button");
if (newTaskBtn && currentMain.children.length > 1) {
newTaskBtn.style.display = "none";
}
}
function deleteSubTask() {
// 在事件监听器中直接调用 currentMain.removeChild(subTaskDiv)
}⚠️ 注意事项与优化建议
- 性能考量：大量主任务时，可考虑对非活跃 <main> 使用 display: none 而非 remove()，避免重复创建开销。
- 样式统一：为 .active 主任务添加 CSS 过渡效果（如 transition: background-color 0.2s）提升交互感。
- 可访问性：为主任务 <h1> 添加 role="tab" 和 aria-selected 属性，子容器 <main> 添加 role="tabpanel"，符合 WAI-ARIA 标准。
- 错误处理：createDialogButton 中应清空输入框值（input_dialog_task.value = ""），避免重复提交相同内容。
此方案摒弃了“用数组模拟状态”的复杂抽象，转而以 DOM 结构本身作为状态载体，简洁、直观、易调试，是前端动态内容切换的经典实践。
