如何将价格切换按钮改造为带人数图标的双向切换开关？

问题背景 #

原有代码通过按钮实现定价表价格切换，现需将按钮改造为带人物图标的双选项切换开关：两侧分别显示「150」和「350」（搭配人物图标），绿色区域标记激活状态，同时保留原有价格切换功能。

完整实现代码 #

HTML 结构

<!-- 切换开关容器 -->
<div class="price-toggle" id="priceToggle">
  <div class="toggle-option active" data-price-key="150">
    <span class="user-icon">👤</span> 150
  </div>
  <div class="toggle-option" data-price-key="350">
    <span class="user-icon">👤</span> 350
  </div>
  <div class="toggle-slider"></div>
</div>

<!-- 定价显示区域 -->
<div id="prijs-small">17,50</div>
<div id="prijs-medium">58</div>
<div id="prijs-large">128,50</div>

CSS 样式

/* 切换开关容器 */
.price-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  background-color: #f0f0f0;
  border-radius: 30px;
  padding: 4px;
  width: 140px;
  cursor: pointer;
}

/* 选项基础样式 */
.toggle-option {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  border-radius: 26px;
  position: relative;
  z-index: 1;
  color: #666;
  transition: color 0.3s ease;
}

/* 激活选项的文字颜色 */
.toggle-option.active {
  color: white;
}

/* 人物图标间距 */
.user-icon {
  margin-right: 4px;
}

/* 滑动激活条 */
.toggle-slider {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  background-color: #2ecc71; /* 绿色激活背景 */
  border-radius: 26px;
  transition: left 0.3s ease;
}

/* 定价区域样式（保持原有风格） */
#prijs-small, #prijs-medium, #prijs-large {
  margin: 10px 0;
  font-size: 18px;
  color: #012d5d;
}

JavaScript 逻辑

// 价格映射表，统一管理不同档位的价格
const priceMap = {
  150: {
    small: "17,50",
    medium: "58",
    large: "128,50"
  },
  350: {
    small: "13,50",
    medium: "30,50",
    large: "61"
  }
};

const toggleContainer = document.getElementById('priceToggle');
const toggleOptions = toggleContainer.querySelectorAll('.toggle-option');
const slider = toggleContainer.querySelector('.toggle-slider');

// 切换价格与开关状态
function togglePriceState() {
  // 判断当前激活档位，计算目标档位
  const activeKey = toggleContainer.querySelector('.toggle-option.active').dataset.priceKey;
  const targetKey = activeKey === '150' ? '350' : '150';
  
  // 更新开关激活状态
  toggleOptions.forEach(opt => opt.classList.toggle('active', opt.dataset.priceKey === targetKey));
  slider.style.left = targetKey === '350' ? 'calc(50% + 4px)' : '4px';
  
  // 更新对应价格
  const targetPrices = priceMap[targetKey];
  document.getElementById('prijs-small').textContent = targetPrices.small;
  document.getElementById('prijs-medium').textContent = targetPrices.medium;
  document.getElementById('prijs-large').textContent = targetPrices.large;
}

// 绑定开关点击事件
toggleContainer.addEventListener('click', togglePriceState);

关键改造说明 #

1. 开关结构设计：用div容器模拟开关，内部包含两个选项和滑动激活条，通过CSS定位实现滑块平滑动画。
2. 状态管理优化：用priceMap统一存储价格数据，替代原有硬编码判断innerHTML的冗余逻辑，后续修改价格更便捷。
3. 交互体验升级：添加滑块移动、文字颜色变化的过渡动画，绿色背景高亮激活状态，符合视觉需求。
4. 事件绑定简化：将点击事件绑定到整个开关容器，无需单独给每个选项绑定事件，逻辑更简洁。

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