为Swatch元素添加swatch--disabled类实现禁用功能失效问题

你的问题根源在于用setAttribute("class", "swatch--disabled")直接替换了元素的class属性，这会清空元素原本的所有样式类——而swatch--disabled通常是一个修饰类，需要配合基础的swatch样式类才能生效，单独设置它自然会出现“未被识别”的情况。

修正后的代码 #

直接用classList.add()添加类（不会覆盖原有类），同时优化选择器提升效率：

// 精准定位目标swatch元素，无需遍历所有span
const targetSwatches = document.querySelectorAll(
  '.swatches__holder span[data-swatch-option="Box"], .swatches__holder span[data-swatch-option="Box and Card"]'
);

targetSwatches.forEach(swatch => {
  // 添加禁用类，保留原有样式类
  swatch.classList.add('swatch--disabled');
  // 确保元素语义上处于禁用状态（可选，根据需求调整）
  swatch.setAttribute('disabled', true);
});

关键说明 #

1. 避免覆盖原有类：classList.add()是添加类的标准方式，它只会追加新类，不会清空元素已有的class属性，保证基础样式和修饰类共存。
2. 精准选择元素：直接通过属性选择器定位目标span，比遍历所有span更高效。
3. 样式检查：如果添加类后样式仍不生效，检查CSS是否正确定义了swatch--disabled的样式，比如：

.swatch--disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

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