如何实现鼠标移出时恢复图片原始src而非硬编码链接？

实现鼠标悬停时切换图片、鼠标移出时恢复原始图片的功能，硬编码原始图片src可以正常生效，但存在多个这类模块时，不想为每个模块重复硬编码原始链接。尝试动态获取原始src的代码后功能失效，求正确实现方式。

原始可运行代码 #

<div class="col-12 text-center">
    <h3>TITLE</h3>
    <div class="name-wrapper">
        <span id="name1" class="some-name opacity-0">Name 1</span>
        <span id="name2" class="some-name opacity-0">Name 2</span>
    </div>
</div>
<div class="col-12">
    <div class="img-set">
        <img src="images/2023/some-img.jpg" alt="Some Image" />
    </div>
    <div class="hotspots">
        <a href="#" data-src="images/2023/some-img2.jpg" data-target="name1">test1</a>
        <a href="#" data-src="images/2023/some-img3.jpg" data-target="name2">test2</a>
    </div>
</div>

<script>
$(".hotspots a").mouseover( function() {
        var value = $(this).attr('data-src');
        $(".img-set img").attr("src", value);

        var target = $(this).data("target");
        var targetName = document.getElementById(target);

        if($(targetName).attr('id') == target) {
            $("#" + target).removeClass("opacity-0");
          }
    })

    $(".hotspots a").mouseout( function() {
        $( '.img-set img' ).attr("src","images/2023/some-img.jpg");

        var target = $(this).data("target");
        var targetName = document.getElementById(target);

        if($(targetName).attr('id') == target) {
            $("#" + target).addClass("opacity-0");
          }
    });
</script>

尝试的失效代码 #

<script>
$(document).ready(function() {
    var original = document.getElementsByClassName(".img-set img").getAttribute("src");

    $(".hotspots a").mouseover( function() {
        var value = $(this).attr('data-src');
        $(".img-set img").attr("src", value);

        var target = $(this).data("target");
        var targetName = document.getElementById(target);

        if($(targetName).attr('id') == target) {
            $("#" + target).removeClass("opacity-0");
          }
    })

    $(".hotspots a").mouseout( function() {
        $( '.img-set img' ).attr("src", original);

        var target = $(this).data("target");
        var targetName = document.getElementById(target);

        if($(targetName).attr('id') == target) {
            $("#" + target).addClass("opacity-0");
          }
    });
})
</script>

解决方案 #

失效原因 #

1. document.getElementsByClassName接收的是纯类名（不带.前缀），且返回的是HTMLCollection集合，不能直接调用getAttribute方法。
2. 全局存储单个原始src无法支持多模块场景，会导致所有模块共享同一张原图路径。

修正后的代码 #

HTML（支持多模块结构）

<!-- 模块1 -->
<div class="image-module">
  <div class="col-12 text-center">
      <h3>TITLE</h3>
      <div class="name-wrapper">
          <span id="name1" class="some-name opacity-0">Name 1</span>
          <span id="name2" class="some-name opacity-0">Name 2</span>
      </div>
  </div>
  <div class="col-12">
      <div class="img-set">
          <img src="images/2023/some-img.jpg" alt="Some Image" />
      </div>
      <div class="hotspots">
          <a href="#" data-src="images/2023/some-img2.jpg" data-target="name1">test1</a>
          <a href="#" data-src="images/2023/some-img3.jpg" data-target="name2">test2</a>
      </div>
  </div>
</div>

<!-- 模块2 -->
<div class="image-module">
  <div class="col-12 text-center">
      <h3>TITLE 2</h3>
      <div class="name-wrapper">
          <span id="name3" class="some-name opacity-0">Name 3</span>
          <span id="name4" class="some-name opacity-0">Name 4</span>
      </div>
  </div>
  <div class="col-12">
      <div class="img-set">
          <img src="images/2023/another-img.jpg" alt="Another Image" />
      </div>
      <div class="hotspots">
          <a href="#" data-src="images/2023/another-img2.jpg" data-target="name3">test3</a>
          <a href="#" data-src="images/2023/another-img3.jpg" data-target="name4">test4</a>
      </div>
  </div>
</div>

JavaScript

$(document).ready(function() {
  // 初始化：给每个模块的图片存储原始src
  $('.image-module').each(function() {
    const $img = $(this).find('.img-set img');
    $img.data('original-src', $img.attr('src'));
  });

  // 鼠标悬停切换图片
  $('.hotspots a').mouseover(function() {
    const $this = $(this);
    const targetSrc = $this.attr('data-src');
    // 定位当前模块内的图片
    const $img = $this.closest('.image-module').find('.img-set img');
    $img.attr('src', targetSrc);

    // 显示对应名称
    const targetId = $this.data('target');
    $('#' + targetId).removeClass('opacity-0');
  });

  // 鼠标移出恢复原图
  $('.hotspots a').mouseout(function() {
    const $this = $(this);
    const $img = $this.closest('.image-module').find('.img-set img');
    // 取出存储的原始src
    const originalSrc = $img.data('original-src');
    $img.attr('src', originalSrc);

    // 隐藏对应名称
    const targetId = $this.data('target');
    $('#' + targetId).addClass('opacity-0');
  });
});

关键优化点 #

• 正确存储原始路径：使用jQuery的data()方法给每个图片元素绑定自身的原始src，避免DOM API使用错误。
• 多模块隔离：通过父容器.image-module和closest()方法，确保每个热点只操作所属模块内的图片，不会干扰其他模块。
• 简化冗余代码：移除不必要的ID判断逻辑，直接通过data-target定位元素操作。

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