js实现按钮组

实现按钮组的基本结构

使用HTML和CSS创建按钮组的基础结构。HTML部分定义按钮容器和按钮元素，CSS部分设置按钮组的样式和布局。

<div class="button-group">
  <button class="button">按钮1</button>
  <button class="button">按钮2</button>
  <button class="button">按钮3</button>
</div>

.button-group {
  display: flex;
  gap: 8px;
}

.button {
  padding: 8px 16px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

.button:hover {
  background-color: #e0e0e0;
}

添加交互功能

使用JavaScript为按钮组添加点击事件处理程序，实现按钮的选中状态切换。

document.querySelectorAll('.button').forEach(button => {
  button.addEventListener('click', () => {
    button.classList.toggle('active');
  });
});

.button.active {
  background-color: #007bff;
  color: white;
}

单选按钮组实现

修改JavaScript代码，确保每次只有一个按钮处于选中状态。

document.querySelectorAll('.button').forEach(button => {
  button.addEventListener('click', () => {
    document.querySelectorAll('.button').forEach(btn => {
      btn.classList.remove('active');
    });
    button.classList.add('active');
  });
});

动态生成按钮组

通过JavaScript动态生成按钮组，适用于数据驱动的场景。

const buttonData = ['选项1', '选项2', '选项3'];
const buttonGroup = document.createElement('div');
buttonGroup.className = 'button-group';

buttonData.forEach(text => {
  const button = document.createElement('button');
  button.className = 'button';
  button.textContent = text;
  buttonGroup.appendChild(button);
});

document.body.appendChild(buttonGroup);

按钮组事件委托

使用事件委托优化事件处理，减少事件监听器数量。

document.querySelector('.button-group').addEventListener('click', (event) => {
  if (event.target.classList.contains('button')) {
    document.querySelectorAll('.button').forEach(btn => {
      btn.classList.remove('active');
    });
    event.target.classList.add('active');
  }
});

响应式按钮组

通过CSS媒体查询实现按钮组在不同屏幕尺寸下的响应式布局。

@media (max-width: 600px) {
  .button-group {
    flex-direction: column;
  }
}