用data-*绑定规格组与选项值的核心是结构化状态映射：每个规格容器加data-spec-container，各选项设data-spec-group和data-spec-value，通过事件委托读取dataset实现多规格联动，禁用用data-disabled="true"而非remove，拼接SKU键须固定顺序。
怎么用 data-* 绑定规格组与选项值
多规格联动的本质是「状态映射」：用户选中“颜色=红色”+“尺寸=M”，系统得能唯一确定一个 SKU。不能靠 class 名硬编码，必须用结构化数据承载关系。data- 属性就是最轻量、语义清晰的载体。
常见错误是把所有规格混在一个 div 里，不区分组，导致 JS 无法识别当前操作的是哪一组。正确做法是每个规格项（如“颜色”下拉框）带 data-spec-group="color"，每个选项（如“红色”按钮）带 data-spec-value="red" 和 data-spec-group="color"。
- 规格容器统一加
data-spec-container，方便 JS 批量监听 - 禁用不合法组合时，不要直接
remove()选项，而是加disabled或data-disabled="true"，保留 DOM 结构便于后续恢复 - 避免用
id做关联（如id="color-red"），ID 易冲突且无法批量处理
change 和 click 事件该监听谁
下拉框（<select>）用 change；按钮/标签式选项（<button> 或 <label>）必须用 click。混用会导致部分设备（尤其是 iOS Safari）点击无响应。
更关键的是：不要给每个选项单独绑事件。用事件委托——监听父容器的 click 或 change，再通过 e.target 拿到触发源，再读取它的 dataset.specGroup 和 dataset.specValue。
立即学习“前端免费学习笔记（深入）”；
- 移动端要额外监听
touchstart，iOS 上click有 300ms 延迟，影响体验 - 如果用了
<input type="radio">，监听change更稳妥，它比click更准确反映用户真实选择意图 - 避免在事件回调里重复查询 DOM，把规格配置（如哪些组合有效）提前解析成 Map 或二维数组缓存
怎么判断当前选中组合是否有效
后端通常返回一个 skus 数组，每个对象含 spec_values: ["red", "m"] 和 stock: 5。前端不能每次点都发请求校验，得本地匹配。
推荐建一个 Set，key 是规格值拼接字符串（如 "red-m-leather"），值为对应 SKU ID 或库存数。拼 key 时务必按固定顺序（比如始终按字段定义顺序：颜色→尺寸→材质），否则 "m-red" 和 "red-m" 会被当成两个不同组合。
- 空值处理：未选全规格时，不要清空已选，而是标记为「待确认」，UI 上灰掉提交按钮即可
- 库存为 0 的组合，不仅要禁用选项，还要在 tooltip 或文案里明确提示“缺货”，不能只视觉隐藏
- 如果规格超过 3 级（比如颜色+尺寸+版本+赠品），建议用递归函数生成全量合法路径，而不是嵌套 for 循环
为什么 dir="rtl" 会让规格标签页错位
不是所有 RTL 场景都要改布局逻辑。但如果你在阿拉伯语或希伯来语站点里用 flex 实现标签页切换，dir="rtl" 会让 flex-direction: row 的起始点自动右移，原本「第一个 tab 左对齐」变成「第一个 tab 右对齐」，导致 JS 计算的偏移量失效。
此时不要强行用 flex-direction: row-reverse 补救——这会破坏语义和可访问性。正确方式是：用 getBoundingClientRect() 动态读取位置，而不是依赖 CSS 声明的 left/right 值；或者改用逻辑属性，比如用 margin-inline-start 替代 margin-left。
- RTL 下
scrollLeft行为反转：向右滚动实际是数值减小，容易误判滚动方向 - 如果用了 transform 平移做 tab 切换动画，确保用
translateX()而非left，前者不受dir影响 - 测试时必须真机打开 RTL 环境，模拟器可能不触发某些渲染 bug
if (group === 'color')。稍一疏忽，新加的“香味”属性就无法联动。 
