本文介绍一种简洁、可复用的方式，通过事件委托和 dom 遍历，仅用一个函数实现按钮组的单选式激活切换，避免为每个按钮重复绑定事件或硬编码元素引用。
本文介绍一种简洁、可复用的方式，通过事件委托和 dom 遍历，仅用一个函数实现按钮组的单选式激活切换，避免为每个按钮重复绑定事件或硬编码元素引用。
在构建商品尺寸选择器等交互组件时，常见需求是：点击任一按钮，仅该按钮处于激活态（如添加 active 类），其余同组按钮自动取消激活。原始代码中通过固定 ID 获取多个按钮并手动调用 toggle()，不仅耦合度高、难以扩展，还会导致“全开全关”的错误行为（因为 toggle() 是切换而非单选）。
✅ 正确思路应是：将按钮归为逻辑组（如 .button-group），利用事件委托监听整个组，点击时移除所有按钮的激活状态，再为当前点击目标单独添加。
以下是推荐的现代化、可维护实现方案：
✅ 推荐实现（语义清晰 + 无需 ID + 支持动态增删）
<label>Size: </label> <div class="button-group size"> <button type="button" value="xs">XS</button> <button type="button" value="s">S</button> <button type="button" value="m" class="active">M</button> <button type="button" value="l">L</button> <button type="button" value="xl">XL</button> <button type="button" value="xxl">XXL</button> </div>
.button-group {
display: inline-flex;
gap: 8px;
}
.button-group button {
background: #f0f0f0;
border: none;
border-radius: 0.5rem;
padding: 8px 16px;
font-size: 14px;
color: #c2c2c2;
cursor: pointer;
transition: all 0.2s ease;
}
.button-group button.active {
background: #000;
color: #fff;
box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.3);
}// 单一函数：处理任意 .button-group 内的按钮激活逻辑
function handleButtonGroupClick(e) {
const button = e.target;
// 确保点击的是 group 内的 button 元素
if (button.tagName !== 'BUTTON' || !button.closest('.button-group')) return;
const group = button.closest('.button-group');
const buttons = group.querySelectorAll('button');
// 移除所有按钮的 active 类
buttons.forEach(btn => btn.classList.remove('active'));
// 为当前点击按钮添加 active 类
button.classList.add('active');
// 可选：触发自定义事件，便于外部响应（如更新购物车数据）
group.dispatchEvent(new CustomEvent('sizechange', {
detail: { value: button.value }
}));
}
// 统一绑定事件委托（只需一次）
document.addEventListener('click', handleButtonGroupClick);
// 【进阶】监听尺寸变更（示例）
document.querySelector('.size').addEventListener('sizechange', (e) => {
console.log('Selected size:', e.detail.value); // 如：'m'
});⚠️ 关键注意事项
- 不要用 toggle() 实现单选：classList.toggle('active') 是切换操作，无法保证“有且仅有一个激活”，必须显式 removeAll + addCurrent。
- 避免硬编码 ID：使用语义化 CSS 类（如 .button-group）和 DOM 遍历，使代码可复用于多个尺寸组、颜色组等。
- 支持动态内容：事件委托天然兼容后续通过 JS 插入的新按钮，无需重新绑定。
- 无障碍友好：建议为按钮添加 aria-pressed 属性同步状态（如 button.setAttribute('aria-pressed', 'true')），提升可访问性。
✅ 总结
用一个轻量级事件处理函数配合语义化 HTML 结构，即可优雅解决多按钮单选激活问题。核心在于：识别目标组 → 清空旧状态 → 设置新状态 → 触发业务逻辑。此模式简洁、可扩展、易测试，是现代前端交互开发的标准实践。
立即学习“Java免费学习笔记（深入）”；
