本文详解如何通过 DOM 操作实现「点击不同主任务标题，动态显示其专属子任务区域」的核心逻辑，重点运用 data 属性、元素显隐控制与状态管理，避免 DOM 冗余渲染。
本文详解如何通过 dom 操作实现「点击不同主任务标题，动态切换显示其专属子任务区域」的核心逻辑，重点运用 data 属性、元素显隐控制与状态管理，避免 dom 冗余渲染。
在构建多类别待办清单（如 “Work”、“Gym”、“Finances”）时，关键交互需求是：每次仅展示当前被点击主任务的子任务列表，隐藏其他所有主任务的子任务区。这并非简单地追加元素，而是需要建立「主任务 ↔ 子任务容器」的映射关系，并通过状态管理实现精准切换。
✅ 核心设计思路
-
唯一标识绑定：为每个主任务
添加 data 属性（如 data="1"），同时为其对应的子任务容器
设置 data-main-for="1"，形成双向关联。 - 单例容器管理：全局维护 currentMain 变量，始终指向当前激活的子任务容器；切换时先隐藏旧容器，再显示新容器。
- 视觉反馈强化：为当前激活的主任务标题添加 .active 类（配合 CSS 高亮），提升用户感知。
? 关键代码实现
let index = 1;
let currentMain = null; // 全局追踪当前显示的子任务容器
function displayTask(getTaskText) {
const div_new_task = document.getElementById("added-tasks");
const taskID = index;
const display_task_name = document.createElement("h1");
display_task_name.setAttribute("data", taskID);
display_task_name.classList.add("task_name");
display_task_name.textContent = getTaskText;
display_task_name.addEventListener("click", function () {
// 1. 查找已存在的对应子任务容器
const targetMain = document.querySelector(`[data-main-for="${taskID}"]`);
// 2. 隐藏当前显示的容器（如有）
if (currentMain && currentMain !== targetMain) {
currentMain.style.display = "none";
}
// 3. 显示目标容器或创建新容器
if (targetMain) {
currentMain = targetMain;
currentMain.style.display = "block";
} else {
currentMain = displayTaskName(taskID); // 创建并返回新容器
}
// 4. 更新激活状态样式
document.querySelectorAll(".task_name.active").forEach(el =>
el.classList.remove("active")
);
display_task_name.classList.add("active");
});
const delete_task_button = document.createElement("button");
delete_task_button.setAttribute("data", taskID);
delete_task_button.textContent = "delete";
delete_task_button.addEventListener("click", () => deleteTaskButton(display_task_name));
div_new_task.append(display_task_name, delete_task_button);
index++;
}
// 创建主任务专属子任务容器（<main data-main-for="X">）
function displayTaskName(taskID) {
const mainContainer = document.getElementById("main-container");
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.append(newTaskBtn);
mainContainer.append(main);
return main;
}</main>
⚠️ 注意事项与最佳实践
- 避免重复创建：每次点击主任务时，优先复用已存在的 data-main-for 容器，而非重复调用 displayTaskName() 创建新节点，防止内存泄漏与 DOM 泄露。
- CSS 配合显隐控制：推荐使用 display: none/block 而非 visibility: hidden/visible，因前者真正脱离文档流，更符合“切换显示”的语义；同时确保 .active 类具备明确背景色（如 background-color: orange）以提供视觉锚点。
- 事件委托优化（进阶）：当主任务数量激增时，可将 .task_name 的 click 事件委托至 #added-tasks 父容器，减少事件监听器数量。
-
无障碍支持：为
添加 role="tab"、为
添加 role="tabpanel"，并配合 aria-controls / aria-labelledby 属性，提升屏幕阅读器兼容性。
通过上述结构化设计，你不仅实现了清晰的主-子任务分离视图，还构建了可扩展、易维护的 DOM 状态管理体系——这是现代前端交互开发中「关注点分离」与「单一数据源」原则的典型落地实践。
