实现单选列表项：使用事件委托与动态类控制

在构建如测试预约系统这类交互式前端应用时，常需让用户从多个选项（如医生/工作人员列表）中单选一项，并实时反馈视觉状态（例如加粗边框、背景色变化）。若直接为每个

✅ 正确解法：事件委托 + 状态归一化

推荐采用 事件委托（Event Delegation） ——仅在父容器（如

）上绑定一次监听器，利用事件冒泡机制捕获子元素点击，再通过 closest() 定位目标
• ，最后批量清理旧状态、设置新状态。这种方式高效、可维护，且天然适配动态插入的 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); }

  ? 关键要点总结

  • 不要为每个
  • 单独绑定 onclick

  ：易造成内存泄漏、状态不同步；

  • 避免 querySelector(“.myUl li”) 返回首个元素：它只匹配第一个，无法批量操作；
  • 优先使用 closest() 而非 parentNode：更健壮，能穿透多层嵌套（如点击 也能定位到外层
  • ）；
  • CSS 中建议使用 transition：让边框/背景变化更平滑，提升用户体验；
  • data-value 属性仍可安全读取：clickedLi.dataset.value 可获取 ID，用于后续提交逻辑。

  通过以上结构化实现，你将获得一个高性能、易扩展、符合现代 Web 开发规范的单选列表组件——无论初始渲染还是后续动态追加人员，均无需修改交互逻辑。