纯JavaScript如何基于swatch激活类与data-swatch-option控制元素显隐

需求说明 #

• 商品页交互规则：仅当名为「Custom Logo」的swatch（商品选项色板）处于选中状态时，展示文件上传按钮，其余状态隐藏该按钮
• 选中状态标识：选中的swatch元素会带有swatch--active类名，选项名存储在data-swatch-option属性中
• 上传按钮容器ID：hulkapps_option_list_6947439312956

原代码缺陷 #

• 元素选择范围错误：使用document.querySelectorAll('span')会匹配页面所有span元素，性能差且容易误绑定无关元素
• 闭包作用域错误：for循环内声明的current变量存在作用域问题，所有点击事件触发时都会引用循环最后一个元素，判断逻辑完全失效
• 状态校验缺失：没有校验swatch--active选中类，无法适配页面默认选中、第三方脚本自动切换选中状态的场景
• 时序逻辑错误：点击后立即判断属性，此时swatch的选中类还未完成切换，会导致判断结果不准
• 初始化逻辑缺失：页面加载完成后没有根据默认选中状态初始化上传按钮的显隐

目标swatch元素结构参考 #

<span data-swatch-option="Custom Logo" data-swatch-index="6947439312956-0" data-booster-initd="true" class="swatch--active">Custom Logo</span>

可直接使用的实现代码 #

window.addEventListener('load', () => {
  // 延迟2s等待第三方商品选项插件渲染完成
  setTimeout(() => {
    const uploadContainer = document.getElementById('hulkapps_option_list_6947439312956');
    if (!uploadContainer) return;
    
    // 精准匹配所有swatch选项元素，排除无关span
    const swatchItems = document.querySelectorAll('span[data-swatch-option]');

    // 统一控制上传区域显隐
    const toggleUploadArea = () => {
      // 同时校验选项值和选中类，判断Custom Logo是否被选中
      const activeCustomLogo = document.querySelector('span.swatch--active[data-swatch-option="Custom Logo"]');
      uploadContainer.style.display = activeCustomLogo ? 'block' : 'none';
    };

    // 初始化时执行一次，适配默认选中场景
    toggleUploadArea();

    // 绑定点击事件
    swatchItems.forEach(item => {
      item.addEventListener('click', () => {
        // 延迟50ms等待swatch的active类切换完成后再校验
        setTimeout(toggleUploadArea, 50);
      });
    });
  }, 2000);
});

逻辑说明 #

• 选择器精准：通过属性选择器定位swatch元素，不会干扰页面其他元素
• 判断逻辑可靠：直接用CSS选择器同时匹配属性值和选中类，不需要手动循环遍历，避免属性读取错误
• 解决作用域问题：使用forEach遍历绑定事件，不存在闭包引用bug
• 时序兼容：点击后短延迟等待类名更新，适配第三方swatch插件的类切换逻辑
• 鲁棒性更强：增加了上传容器存在性判断，避免元素不存在时报错
• 逻辑解耦：显隐控制抽为独立函数，后续如果需要在variant切换等其他场景触发更新，可以直接调用

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