如何简化实现点击切换透明度效果的JavaScript代码

AI 小北

2026-9-2

葡萄酒品类切换JS代码简化方案

你的代码完全可以在保留全部原有交互效果的前提下大幅精简，核心是把重复的逻辑抽离，不用为每个按钮单独编写几乎完全一致的点击事件处理函数。

核心优化思路

把品类和对应指示器的映射关系统一存在配置数组里，避免硬编码重复写ID
抽离「重置所有同组元素透明度」的公共逻辑，不用每次手动逐个给6个元素赋值
循环统一给CTA按钮绑定点击事件，减少重复的事件绑定代码

简化后可直接运行的代码

// 葡萄酒品类与对应指示器的配置表
const wineList = [
  { ctaType: 'redwine', indicatorNum: 1 },
  { ctaType: 'purplewine', indicatorNum: 2 },
  { ctaType: 'whitewine', indicatorNum: 3 }
];

// 遍历配置统一绑定点击事件
wineList.forEach(activeWine => {
  document.getElementById(`cta_${activeWine.ctaType}`).onclick = () => {
    // 第一步：把所有指示器、主视觉区域透明度统一设为0
    wineList.forEach(wine => {
      document.getElementById(`indicator_${wine.indicatorNum}`).style.opacity = '0';
      document.getElementById(`hero_${wine.ctaType}`).style.opacity = '0';
    });
    // 第二步：把当前点击对应的元素透明度设为1
    document.getElementById(`indicator_${activeWine.indicatorNum}`).style.opacity = '1';
    document.getElementById(`hero_${activeWine.ctaType}`).style.opacity = '1';
  };
});