本文详解如何在动态生成的 <li> 列表中实现「单选高亮」效果——点击任一列表项时，仅该元素添加 .active 类，其余自动移除，避免多选冲突，适用于预约系统、人员选择等场景。
本文详解如何在动态生成的 `
在构建如测试预约系统这类交互式前端应用时，常需让用户从多个选项（如医生/工作人员列表）中单选一项，并实时反馈视觉状态（例如加粗边框、背景色变化）。若直接为每个 <li> 绑定独立事件监听器，不仅性能低下，更难以统一管理选中状态；而原代码中循环绑定 + 手动 classList.toggle() 的方式，会导致多选残留，无法满足“仅一个激活”的核心需求。
✅ 正确解法：事件委托 + 状态归一化
推荐采用 事件委托（Event Delegation） ——仅在父容器（如 <ul>）上绑定一次监听器，利用事件冒泡机制捕获子元素点击，再通过 closest() 定位目标 <li>，最后批量清理旧状态、设置新状态。这种方式高效、可维护，且天然适配动态插入的 DOM 元素。
1. 优化 HTML 渲染逻辑
避免在循环中反复操作 innerHTML（会重绘整个列表），改用 map() 生成 HTML 字符串数组，再一次性插入：
const staff = [
{ id: 1, name: "Alex Rosetta", email: "...", image: "https://i.ibb.co/..." },
{ id: 2, name: "Maria July", email: "...", image: "https://i.ibb.co/..." }
];
function generateListHTML(data) {
return data.map(({ id, name, email, image }) => `
<li class="repoFolder" data-value="${id}">
<div class="doc-photo">
<img src="${image}" alt="Photo of ${name}" />
</div>
<div class="doc-infos">
<p class="name">${name}</p>
<p class="mail">${email}</p>
</div>
</li>
`).join('');
}
const list = document.querySelector('ul.myUl');
list.insertAdjacentHTML('beforeend', generateListHTML(staff));⚠️ 注意：insertAdjacentHTML 比 innerHTML += 更安全高效，避免重复解析与重排。
2. 绑定单点监听器，实现单选逻辑
// 仅监听 ul，不遍历每个 li
list.addEventListener('click', (e) => {
// 确保点击目标是 li 或其内部元素
const clickedLi = e.target.closest('li.repoFolder');
if (!clickedLi) return;
// 移除所有 li 的 active 类（归一化状态）
list.querySelectorAll('li.repoFolder').forEach(li => {
li.classList.remove('active');
});
// 仅给当前点击项添加 active 类
clickedLi.classList.add('active');
});3. 配套 CSS 样式（示例）
.myUl {
list-style: none;
padding: 0;
}
.repoFolder {
border: 2px solid #ddd;
border-radius: 8px;
margin-bottom: 12px;
cursor: pointer;
transition: border-color 0.2s, box-shadow 0.2s;
}
.repoFolder.active {
border-color: #4285f4;
box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.2);
}? 关键要点总结
- 不要为每个 <li> 单独绑定 onclick：易造成内存泄漏、状态不同步；
- 避免 querySelector(".myUl li") 返回首个元素：它只匹配第一个，无法批量操作；
- 优先使用 closest() 而非 parentNode：更健壮，能穿透多层嵌套（如点击 <img> 也能定位到外层 <li>）；
- CSS 中建议使用 transition：让边框/背景变化更平滑，提升用户体验；
- data-value 属性仍可安全读取：clickedLi.dataset.value 可获取 ID，用于后续提交逻辑。
通过以上结构化实现，你将获得一个高性能、易扩展、符合现代 Web 开发规范的单选列表组件——无论初始渲染还是后续动态追加人员，均无需修改交互逻辑。
