如何使用 jquery 更改鼠标悬停在 div 上时的图像 - 重构

Question

我有下面的代码，它在 img 标签上有进度图像。我有 4 div 下面。在 div 的鼠标悬停时，我正在相应地更改图像。我使用 jQuery 实现了这一点。但是我必须通过使用 jQuery 文件中的图像路径来实现这一点。是否有其他替代方法可以在不使用 jQuery 文件中的图像路径的情况下实现此目的。（使用 show/hide ）或任何其他在悬停时动态显示图像的最佳方法。我的目的是从 jQuery 文件中删除图像路径。

$(document).ready(function() {

  $("#image1").mouseover(function() {
    $("#srcImage").attr('src', 'assets/images/progress.svg');
  });
  $("#image2").mouseover(function() {
    $("#srcImage").attr('src', 'assets/images/progressOne.svg');
  });
  $("#image3").mouseover(function() {
    $("#srcImage").attr('src', 'assets/images/progressTwo.svg');
  });
  $("#image4").mouseover(function() {
    $("#srcImage").attr('src', 'assets/images/progressThree.svg');
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="imageContent">
  <img src='assets/images/progress.svg' id="srcImage" />
</div>

<div class="row">
  <div class="col-lg-3" id="image1">
    Step 1
  </div>
  <div class="col-lg-3" id="image2">
    Step 2
  </div>
  <div class="col-lg-3" id="image3">
    Step 3
  </div>
  <div class="col-lg-3" id="image4">
    Step 4
  </div>
</div>
</div>

Answer 1

你可以按照下面的代码，你可以让图像源在 hover 事件而不是 mouseover 事件上替换为 div 数据属性，因为 mouseover 随时触发鼠标指针移动，它将继续更换不必要的图像将 image class 添加到每个 div 并将每个 div 的悬停事件处理程序附加到 class image 并读取其数据属性以替换为 srcIamge

这样您在添加/删除任何步骤时都不需要更新您的 jquery 脚本 div。

注意：我给 div 设置了 50px 的高度和背景颜色，以分别识别每个 div。

$(document).ready(function() {
  $(".row div.image").hover(function() {
    console.log($(this).data('img'));
    $("#srcImage").attr('src', $(this).data('img'));
  }, function(){
    console.log('hover out');
  });
})

.image {
  padding: 10 10 10 10;
  background-color: blue;
  height: 50px;
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="imageContent">
  <img src='assets/images/progress.svg' id="srcImage" />
</div>

<div class="row">
  <div class="col-lg-3 image" id="image1" data-img="assets/images/progress.svg">
    Step 1
  </div>
  <div class="col-lg-3 image" id="image2" data-img="assets/images/progressOne.svg">
    Step 2
  </div>
  <div class="col-lg-3 image" id="image3" data-img="assets/images/progressTwo.svg">
    Step 3
  </div>
  <div class="col-lg-3 image" id="image4" data-img="assets/images/progressThree.svg">
    Step 4
  </div>
</div>

Answer 2

您可以将图像放在不同的 div 中，在启动时隐藏 div，当鼠标移到包含步骤的 div 上时显示 div。

<!DOCTYPE html>
    <meta charset="utf-8"/>
    <html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                $("#image1").mouseover(function() {
                    $("#img1").show();
              $("#img2").hide();
              $("#img3").hide();
              $("#img4").hide();
                 });
                 $("#image2").mouseover(function() {
                    $("#img2").show();
              $("#img1").hide();
              $("#img3").hide();
              $("#img4").hide();
                 });
                 $("#image3").mouseover(function() {
                    $("#img3").show();
              $("#img2").hide();
              $("#img1").hide();
              $("#img4").hide();
                 });
                 $("#image4").mouseover(function() {
                    $("#img4").show();
              $("#img1").hide();
              $("#img3").hide();
              $("#img2").hide();
                 });
            });
        </script> 
        <style type="text/css">
            .images {
                display: none;
            }
            #img1 {display: block}
        </style>
    </head>
        <body>
            <div class="row">
                <div class="col-lg-3" id="image1">
                Step 1
                </div>
                <div class="col-lg-3" id="image2">
                Step 2
                </div>
                <div class="col-lg-3" id="image3">
                Step 3
                </div>
                <div class="col-lg-3" id="image4">
                Step 4
                </div>
                <div class="images" id = "img1">
                    <img src="https://via.placeholder.com/150">
                </div>
                <div class="images" id = "img2">
                    <img src="https://via.placeholder.com/200">
                </div>
                <div class="images" id = "img3">
                    <img src="https://via.placeholder.com/250">
                </div>
                <div class="images" id = "img4">
                    <img src="https://via.placeholder.com/300">
                </div>
            </div>
        </body>
    </html>

如何使用 jquery 更改鼠标悬停在 div 上时的图像 - 重构

How to change the image on mouse hover on a div using jquery - Refactoring

jquery

refactoring

mousehover