如何用单个JavaScript函数实现多按钮间的classList独立切换？

你的核心问题是点击按钮时同时操作了所有按钮的active类，导致全部切换。下面是优化后的方案，支持单选尺寸按钮，且代码扩展性更强：

修改后的JavaScript代码 #

// 获取所有尺寸按钮
const sizeButtons = document.querySelectorAll('.size-btn');

// 给每个按钮绑定点击事件
sizeButtons.forEach(button => {
  button.addEventListener('click', handleSizeClick);
});

function handleSizeClick(event) {
  // 先移除所有按钮的active类
  sizeButtons.forEach(btn => btn.classList.remove('active'));
  
  // 给当前点击的按钮添加active类
  const clickedButton = event.target;
  clickedButton.classList.add('active');
}

可选：支持取消已选中的尺寸 #

如果需要允许点击已激活的按钮取消选择，修改handleSizeClick函数即可：

function handleSizeClick(event) {
  const clickedButton = event.target;
  const isActive = clickedButton.classList.contains('active');
  
  // 先移除所有按钮的active类
  sizeButtons.forEach(btn => btn.classList.remove('active'));
  
  // 如果当前按钮原本未激活，才添加active类；否则保持取消状态
  if (!isActive) {
    clickedButton.classList.add('active');
  }
}

代码说明 #

• 用document.querySelectorAll('.size-btn')批量获取按钮，新增尺寸按钮时无需修改JS代码，扩展性更好
• event.target指向当前被点击的按钮，精准操作单个元素，避免同时修改所有按钮
• 单选逻辑通过"先清所有，再激活当前"实现，符合商品尺寸选择的常规需求

CSS优化建议 #

可以调整默认状态的样式，让未选中的按钮保持基础样式，选中时替换为active：

/* 默认状态 */
.size-btn {
  font-size: 12px;
  color: #c2c2c2;
  background-color: #f0f0f0;
  width: 38px;
  height: 42px;
  border-radius: 0.5rem;
  border: none;
  margin-right: 10px;
  margin-bottom: 35px;
  cursor: pointer; /* 默认添加鼠标指针，提升交互体验 */
}

/* 选中状态 */
.size-btn.active {
  color: #fff;
  background-color: #000;
  box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.3);
  transition: 0.3s ease; /* 缩短过渡时长，让交互更自然 */
}

内容的提问来源于stack exchange，提问作者yizzyluiz