如何修复代码实现目的地图片切换及缩略图悬停预览功能？

需求说明 #

• 用户选择目的地时，主图切换为对应目的地的图片，同时缩略图更新为该目的地的配套图片
• 鼠标悬停缩略图时，主图切换为该缩略图的图片

当前问题 #

选择下拉选项时缩略图能切换，但主图不显示，且悬停缩略图时主图无变化

现有代码 #

HTML代码 #

<form id="form">
  <div>
    <div>
      <select id="s1" onchange="changePictures()">
        <option value="Africa">Africa</option>
        <option value="Japan">Japan</option>
        <option value="London">London</option>
      </select>
    </div>
  </div>
</form>

<div id="thumbnailsContainer">
  <div id="thumb1" class="thumbnail">
    <img src="images/africa1.jpg" width="50" height="60" />
  </div>
  <div id="thumb2" class="thumbnail">
    <img src="images/africa2.jpg" width="50" height="60" />
  </div>
    <div id="thumb3" class="thumbnail">
  <img src="images/africa3.jpg" width="50" height="60" />
    </div>
  <div id="thumb4" class="thumbnail">
    <img src="images/africa4.jpg" width="50" height="60" />
  </div>
</div>

JavaScript数据定义 #

const africaImages = [
    { src: "images/africa1.jpg" },
    { src: "images/africa2.jpg" },
    { src: "images/africa3.jpg" },
    { src: "images/africa4.jpg" },
];
const japanImages = [
    { src: "images/japan2.jpg" },
    { src: "images/japan3.jpg" },
    { src: "images/japan4.jpg" },
    { src: "images/japan6.jpg" },
];
const londonImages = [
    { src: "images/london1.jpg" },
    { src: "images/london2.jpg" },
    { src: "images/london3.jpg" },
    { src: "images/london4.jpg" },
];

JavaScript函数 #

function changePictures() {
    const selectedOption = document.getElementById("s1").value;
    currentOption = selectedOption;

    for (let i = 0; i < 4; i++) {
        document
          .getElementById(`thumb${i + 1}`)
          .getElementsByTagName("img")[0].src = thumbnails[selectedOption][i].src;
    }

    document.getElementsByName("bp")[0].src = thumbnails[selectedOption][0].src;
}

问题分析与修复方案 #

问题根源：

1. 原HTML缺少主图元素（name="bp"的图片标签），导致主图无处显示
2. 未定义thumbnails映射对象，原函数里的thumbnails[selectedOption]找不到对应数据
3. 没有给缩略图绑定鼠标悬停事件，悬停时主图无法切换
4. currentOption未声明，会成为全局变量存在隐患

修复后的完整代码如下：

修复后的HTML代码 #

<form id="form">
  <div>
    <div>
      <select id="s1" onchange="changePictures()">
        <option value="Africa">Africa</option>
        <option value="Japan">Japan</option>
        <option value="London">London</option>
      </select>
    </div>
  </div>
</form>

<!-- 添加主图元素，与原函数选择器对应 -->
<img name="bp" src="images/africa1.jpg" alt="主图" style="width: 300px; height: auto;" />

<div id="thumbnailsContainer">
  <div id="thumb1" class="thumbnail">
    <img src="images/africa1.jpg" width="50" height="60" />
  </div>
  <div id="thumb2" class="thumbnail">
    <img src="images/africa2.jpg" width="50" height="60" />
  </div>
  <div id="thumb3" class="thumbnail">
    <img src="images/africa3.jpg" width="50" height="60" />
  </div>
  <div id="thumb4" class="thumbnail">
    <img src="images/africa4.jpg" width="50" height="60" />
  </div>
</div>

修复后的JavaScript代码 #

const africaImages = [
    { src: "images/africa1.jpg" },
    { src: "images/africa2.jpg" },
    { src: "images/africa3.jpg" },
    { src: "images/africa4.jpg" },
];
const japanImages = [
    { src: "images/japan2.jpg" },
    { src: "images/japan3.jpg" },
    { src: "images/japan4.jpg" },
    { src: "images/japan6.jpg" },
];
const londonImages = [
    { src: "images/london1.jpg" },
    { src: "images/london2.jpg" },
    { src: "images/london3.jpg" },
    { src: "images/london4.jpg" },
];

// 定义地区与图片数组的映射，解决原函数找不到数据的问题
const thumbnails = {
  Africa: africaImages,
  Japan: japanImages,
  London: londonImages
};

let currentOption = "Africa"; // 初始化当前选中地区

function changePictures() {
    const selectedOption = document.getElementById("s1").value;
    currentOption = selectedOption;
    const mainImg = document.getElementsByName("bp")[0];
    const imageList = thumbnails[selectedOption];

    // 更新缩略图
    for (let i = 0; i < 4; i++) {
        document.getElementById(`thumb${i + 1}`).querySelector("img").src = imageList[i].src;
    }

    // 更新主图为当前地区第一张图
    mainImg.src = imageList[0].src;
}

// 给所有缩略图添加悬停切换主图的事件
document.querySelectorAll(".thumbnail img").forEach(img => {
  img.addEventListener("mouseover", function() {
    const mainImg = document.getElementsByName("bp")[0];
    mainImg.src = this.src;
  });
});

// 页面加载完成后初始化主图
window.onload = function() {
  changePictures();
};

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