如何用 JavaScript 实现单个旗帜悬停时动态切换地图图片并更新标题

本文详解如何通过事件委托与 data 属性，为多个国旗图片独立绑定 mouseover/mouseout 行为，实现悬停时仅切换当前图片、同步更新页面主标题，避免全局误触发。

本文详解如何通过事件委托与 data 属性，为多个国旗图片独立绑定 mouseover/mouseout 行为，实现悬停时仅切换当前图片、同步更新页面主标题，避免全局误触发。

在原始代码中，所有元素共用同一组 setNewImage() 和 setOldImage() 函数，导致鼠标悬停任一旗帜时，三张图片全部切换——这是典型的「未绑定上下文」问题：函数无法区分是哪个元素触发了事件。同时，

标签内容也无法按需响应。

核心解决方案：摒弃内联事件 + 使用语义化 data 属性 + 事件监听器绑定到每个元素

✅ 推荐采用现代、可扩展、解耦的写法：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

HTML 结构优化：为每张旗帜图添加 class="img"（便于批量选择），并通过 data-* 属性内嵌国家名、旗帜路径和地图路径；
JS 逻辑重构：使用 querySelectorAll('.img') 获取所有旗帜元素，遍历为其单独绑定 mouseover/mouseout 事件，利用 event.target 或闭包访问当前元素的 dataset；
标题动态控制：将
设置 id="title"，悬停时设为 img.dataset.name，移出时恢复默认文案。

以下是完整可运行示例：



  <meta charset="UTF-8"><title>Countries and Flags</title><style>
    img {
      height: 75px;
      aspect-ratio: 3 / 2;
      object-fit: cover;
      margin: 10px;
      cursor: pointer;
      transition: transform 0.2s;
    }
    img:hover {
      transform: scale(1.05);
    }
  </style><h1 id="title">Countries and Flags</h1>

  @@##@@

  @@##@@

  @@##@@

  <script>
    // 页面加载完成后初始化旗帜图片
    window.addEventListener('load', () => {
      document.querySelectorAll('.img').forEach(img => {
        img.src = img.dataset.flag;
      });
    });

    // 为每张旗帜绑定悬停行为
    document.querySelectorAll('.img').forEach(img => {
      img.addEventListener('mouseover', () => {
        img.src = img.dataset.map;
        document.getElementById('title').textContent = img.dataset.name;
      });

      img.addEventListener('mouseout', () => {
        img.src = img.dataset.flag;
        document.getElementById('title').textContent = 'Countries and Flags';
      });
    });
  </script>

? 关键要点说明：