在HTML页面用JavaScript实现多图片悬停切换效果遇阻求助

你的代码里有好几个硬伤，导致悬停完全没效果：

1. forEach参数搞反了：images.forEach(function(index) {...})里，forEach的第一个回调参数是当前的图片元素，不是索引，你把元素当成索引用，后面的逻辑全错了。
2. 拼写错误一堆：变量明明叫images，你写成image；函数定义的是changeImg/restoreImg，调用的时候写成了changeImage/restoreImage，浏览器根本找不到这些函数。
3. 索引算错了：images[index - 1]会出现负数索引（比如index是0的时候），直接报错，而且imageSources[index]也会超出数组范围（你的数组只有3个元素，索引最大是2）。
4. 逻辑不符合需求：你要的是「悬停时切换整行所有图片」，但原代码是给每个图片单独绑事件，只会切换单个图片，不是整行。

先修复所有错误，同时实现你要的「悬停整行切换所有图片」的效果：

HTML（给行加个ID方便获取） #

<div class="row" id="imageRow">
  <div class="col-md-4">
    <img src="images/frozen.jpg" class="img-fluid img-thumbnail mb-4" alt="" data-original="images/frozen.jpg">
  </div>
  <div class="col-md-4">
    <img src="images/frozen.jpg" class="img-fluid img-thumbnail mb-4" alt="" data-original="images/frozen.jpg">
  </div>
  <div class="col-md-4">
    <img src="images/frozen.jpg" class="img-fluid img-thumbnail mb-4" alt="" data-original="images/frozen.jpg">
  </div>
</div>

JavaScript（修复后） #

const imageSources = ["images/cat1.jpg", "images/cat2.jpg", "images/cat3.jpg"];
const imageRow = document.getElementById('imageRow');
const images = imageRow.querySelectorAll('.img-fluid.img-thumbnail');

// 切换整行所有图片到目标资源
function changeAllImgs() {
  images.forEach((img, idx) => {
    img.src = imageSources[idx];
  });
}

// 把所有图片恢复成原始状态
function restoreAllImgs() {
  images.forEach(img => {
    img.src = img.dataset.original;
  });
}

// 给整行绑悬停事件，鼠标移进去切换，移出来恢复
imageRow.addEventListener('mouseover', changeAllImgs);
imageRow.addEventListener('mouseout', restoreAllImgs);

1. 事件委托（适合后期可能动态加图片的场景） #

不用提前获取所有图片，直接给父容器绑事件，动态处理，代码更简洁：

const imageSources = ["images/cat1.jpg", "images/cat2.jpg", "images/cat3.jpg"];
const imageRow = document.getElementById('imageRow');

imageRow.addEventListener('mouseover', () => {
  const images = imageRow.querySelectorAll('.img-fluid.img-thumbnail');
  images.forEach((img, idx) => {
    // 先把原始地址存起来，避免多次悬停覆盖
    if (!img.dataset.original) {
      img.dataset.original = img.src;
    }
    img.src = imageSources[idx];
  });
});

imageRow.addEventListener('mouseout', () => {
  const images = imageRow.querySelectorAll('.img-fluid.img-thumbnail');
  images.forEach(img => {
    img.src = img.dataset.original;
  });
});

2. 数据和结构绑定（后期改图更方便） #

把每个图片的悬停地址直接写在HTML里，JS只负责读数据切换，不用改JS代码就能换图片：

<div class="row" id="imageRow">
  <div class="col-md-4">
    <img src="images/frozen.jpg" class="img-fluid img-thumbnail mb-4" alt="" data-hover="images/cat1.jpg" data-original="images/frozen.jpg">
  </div>
  <div class="col-md-4">
    <img src="images/frozen.jpg" class="img-fluid img-thumbnail mb-4" alt="" data-hover="images/cat2.jpg" data-original="images/frozen.jpg">
  </div>
  <div class="col-md-4">
    <img src="images/frozen.jpg" class="img-fluid img-thumbnail mb-4" alt="" data-hover="images/cat3.jpg" data-original="images/frozen.jpg">
  </div>
</div>

const imageRow = document.getElementById('imageRow');

imageRow.addEventListener('mouseover', () => {
  imageRow.querySelectorAll('.img-fluid.img-thumbnail').forEach(img => {
    img.src = img.dataset.hover;
  });
});

imageRow.addEventListener('mouseout', () => {
  imageRow.querySelectorAll('.img-fluid.img-thumbnail').forEach(img => {
    img.src = img.dataset.original;
  });
});

这种方式的好处是：改图片地址直接改HTML就行，不用碰JS，维护起来更省心。

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