用纯HTML+CSS+JS实现多维规格弹窗，需以JS驱动状态联动：用<button>渲染规格项，基于SKU组合映射表动态启用/禁用选项，通过固定顺序拼接key（如color_size_version）查库存，确认前校验validSkus[key]?.stock > 0，移动端设最小触控44px并防连点。
怎么用纯 HTML + CSS + JS 实现可选规格的弹窗
不能只靠 <select>，商品规格是多维组合（比如“颜色+尺寸+版本”），必须动态联动、禁用无效组合、高亮当前选择。核心是用 JS 控制状态，HTML 只负责结构，CSS 负责视觉反馈。
常见错误：把所有规格选项写死在 DOM 里，不根据库存或已选值实时更新可用项；或者用多个独立 <select>，但没做联动校验，导致用户能选到无货组合。
- 每个规格项用
<button>或带data-value的<label>，不用<option>—— 更易控制样式和禁用态 - 规格数据建议用数组对象描述，例如：
[{"id": "color", "name": "颜色", "values": [{"value": "red", "label": "红色", "stock": 12}]}, ...] - 初始化时先渲染全部规格按钮，再根据后端返回的
skus数据生成有效组合映射表（常用结构：{'red_40': {skuId: '1001', stock: 5}}）
为什么点击一个规格后其他规格要动态变灰或禁用
因为不是所有组合都存在库存或 SKU。比如选了“黑色”，但“黑色+XL”没货，那 XL 按钮就得置灰；反之，如果“黑色+M”有货，M 就该保持可点。这个逻辑不能靠 CSS 类名硬写死，得实时计算。
关键判断逻辑在点击事件里：遍历当前已选规格（如 color=black），再看剩下未选规格（如 size）中哪些值，跟已选值拼起来能命中有效 SKU 键。
立即学习“前端免费学习笔记（深入）”；
- 用
Array.every()检查已选规格是否全都有值，再用Object.keys(validSkus)找出所有合法组合键 - 对每个待更新的规格项（如 size 列表），逐个判断
`${selectedColor}_${sizeValue}`是否在合法键集合中 - 禁用时加
disabled属性 +opacity: 0.4，不要只靠 class 控制样式，否则屏幕阅读器无法识别
怎么拿到最终选中的 SKU 和参数
用户点完“确认”按钮时，不是读取每个按钮的 data-value 拼接，而是检查所有规格是否已完整选择（避免漏选），再合成 key 去查预存的 validSkus 对象。
容易踩的坑：直接用 JSON.stringify(selected) 当作 key，但属性顺序不固定会导致查不到；或者没校验 stock > 0 就提交，导致下单失败。
- 合成 key 用固定顺序字段名，例如
[color, size, version].map(k => selected[k]).join('_') - 确认前必须检查
validSkus[key] && validSkus[key].stock > 0 - 返回的数据结构建议统一为：
{skuId: '1001', price: 299, stock: 5, props: {color: 'red', size: 'M'}}
移动端点击区域太小、误触怎么办
按钮默认尺寸在手机上不到 30px，手指一点就容易点错。不能只加 padding，还得处理 active 态反馈和防连点。
- 给规格按钮设
min-width: 44px; min-height: 44px（iOS 最小触控区） - 用
:active伪类加背景色变化，但注意 Safari 需要加cursor: pointer才触发 - 点击后立即加
pointer-events: none并设 300ms 后恢复，防止手抖连点两次 - 别用
ontouchstart自己写事件，优先用click—— 现代移动端 click 延迟已优化，且兼容性更稳
