如何实现点击颜色选项后联动展示对应颜色的尺码数据？

• 第一步：整理关联数据结构
  将颜色和对应尺码做绑定，示例如下：

const colorSizeMap = {
  "黑色": ["S", "M", "L", "XL", "XXL"],
  "绿色": ["S", "M", "L"]
}

如果需要额外携带库存、售价等信息，也可以把数组项换成对象存储。

• 第二步：编写基础页面结构

<!-- 颜色选择区域 -->
<div class="color-selector">
  <button class="color-item" data-color="黑色">黑色</button>
  <button class="color-item" data-color="绿色">绿色</button>
</div>
<!-- 尺码展示区域 -->
<div class="size-selector">
  <p>请选择尺码：</p>
  <div class="size-list"></div>
</div>

• 第三步：实现交互逻辑
  给颜色选项绑定点击事件，点击后读取当前选中的颜色，取出对应尺码列表渲染到尺码区域，原生JS示例如下：

const colorItems = document.querySelectorAll('.color-item')
const sizeList = document.querySelector('.size-list')

colorItems.forEach(item => {
  item.addEventListener('click', () => {
    // 切换选中样式
    colorItems.forEach(el => el.classList.remove('active'))
    item.classList.add('active')
    // 获取当前选中颜色
    const selectedColor = item.dataset.color
    // 读取对应尺码列表
    const sizes = colorSizeMap[selectedColor]
    // 渲染尺码
    let sizeHtml = ''
    sizes.forEach(size => {
      sizeHtml += `<span class="size-item">${size}</span>`
    })
    sizeList.innerHTML = sizeHtml
  })
})

• 第四步：补充选中状态样式

.color-item.active {
  border: 2px solid #2385bb;
  background: #e8f4fc;
}
.size-item {
  margin-right: 8px;
  padding: 4px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

如果是用Vue、React等前端框架开发，只需要把当前选中的颜色存为响应式变量，尺码列表通过响应式变量计算生成即可，无需手动操作DOM。

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