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

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

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

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

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

  1. 优化 HTML 渲染逻辑

  避免在循环中反复操作 innerHTML（会重绘整个列表），改用 map() 生成 HTML 字符串数组，再一次性插入：

  

  灵枢SparkVertex

  零代码AI应用开发平台

  下载

  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 开发规范的单选列表组件——无论初始渲染还是后续动态追加人员，均无需修改交互逻辑。