如何用更少代码实现JavaScript鼠标悬停切换图片

你可以通过HTML数据属性 + 通用事件处理函数大幅减少重复代码，核心思路是把每个图片的前后路径存在元素自身属性里，用同一个函数处理所有图片的悬停逻辑：

第一步：修改HTML结构 #

给每个需要切换的<img>标签添加data-front（默认显示的图片路径）和data-back（悬停时的图片路径）属性：

<img id="rImg" src="images/blackfront.png" data-front="images/blackfront.png" data-back="images/blackback.png">
<img id="rMImg" src="images/greyfront.png" data-front="images/greyfront.png" data-back="images/greyback.png">
<img id="lMImg" src="images/navyfront.png" data-front="images/navyfront.png" data-back="images/navyback.png">

（注：原代码里第三个图片存在两处错误——mouseover里误写了img4.src，还有路径拼写错误navyront，这里已一并修正）

第二步：精简JS代码 #

仅用一段代码就能处理所有图片的悬停切换：

// 选择所有带data-front属性的图片
const hoverImages = document.querySelectorAll('[data-front]');

// 通用悬停处理函数
function handleImageHover(e) {
  const target = e.target;
  // 根据事件类型切换对应路径
  target.src = e.type === 'mouseover' ? target.dataset.back : target.dataset.front;
}

// 批量绑定事件
hoverImages.forEach(img => {
  img.addEventListener('mouseover', handleImageHover);
  img.addEventListener('mouseout', handleImageHover);
});

进阶优化（可选） #

如果页面后续会动态新增这类图片，用事件委托只给父容器绑定一次事件即可，无需重复绑定：

// 假设所有图片都在id为image-container的父容器内
const container = document.getElementById('image-container');

container.addEventListener('mouseover', e => {
  const target = e.target;
  if (target.hasAttribute('data-front')) {
    target.src = target.dataset.back;
  }
});

container.addEventListener('mouseout', e => {
  const target = e.target;
  if (target.hasAttribute('data-front')) {
    target.src = target.dataset.front;
  }
});

这种方式不管新增多少个切换图片，JS代码量都不会增加，维护也更方便——修改图片路径直接改HTML的data属性就行，不用动JS逻辑。

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