咨询：如何根据click.id优化切换图片的实现方式

原代码功能可行，但存在硬编码分支冗余和事件绑定效率低的问题，以下是两种更简洁、易维护的优化方案：

方案一：利用ID命名规则直接拼接路径（最简洁） #

如果按钮ID和图片文件名的对应关系固定（比如product-1对应product-1.png），可以直接通过ID拼接图片路径，省去大量分支判断：

const imgChange = document.querySelector('.eyeImage img');
// 修正原代码中未定义的eyeImage，改为操作图片的父容器
const eyeImageContainer = document.querySelector('.eyeImage');
const eyeBtn = document.querySelectorAll('.icons .fa-eye');

eyeBtn.forEach(btn => {
  btn.addEventListener('click', () => {
    eyeImageContainer.classList.remove('active');
    // 直接用按钮ID拼接图片路径
    imgChange.src = `images/${btn.id}.png`;
  });
});

方案二：事件委托+映射表（扩展性更强） #

如果后续可能出现ID与图片名不匹配，或按钮数量较多的情况，推荐用事件委托（仅给父元素绑定一次事件）+映射表（维护ID与图片路径的对应关系），既高效又便于维护：

const imgChange = document.querySelector('.eyeImage img');
const eyeImageContainer = document.querySelector('.eyeImage');
// 父容器，用于绑定事件委托
const iconsContainer = document.querySelector('.icons');

// 映射表：键为按钮ID，值为对应图片路径
const productImgMap = {
  'product-1': 'images/product-1.png',
  'product-2': 'images/product-2.png',
  'product-3': 'images/product-3.png'
};

iconsContainer.addEventListener('click', (e) => {
  // 判断点击的是目标按钮
  if (e.target.classList.contains('fa-eye')) {
    eyeImageContainer.classList.remove('active');
    const targetId = e.target.id;
    // 从映射表取路径，若ID不存在则保留当前图片路径
    imgChange.src = productImgMap[targetId] || imgChange.src;
  }
});

优化点说明 #

• 移除冗余的if-else分支，新增按钮时只需更新映射表或保持ID命名规则，无需修改逻辑代码
• 事件委托减少了事件绑定数量，按钮越多性能优势越明显
• 增加容错处理，避免ID不在映射表中时图片路径出错
• 修正了原代码中eyeImage未定义的问题，统一操作选中的DOM元素

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