javascript - 如何在悬停时加载不同的图像

Question

我正在从事电子商务应用程序，在此我想实现下面提到的任务...

当我将鼠标悬停在较小的图像上时，我需要在大框中显示相应的图像。

这里的大图像尺寸是2000 * 2000像素 较小的图像尺寸是 80 * 80 但我在其他文件夹中有相应较小图像的大图像。当我将鼠标悬停在相关的较小图像上时，我想将大图像加载到大框中...

我做了一些事情，但它对我不起作用......

$('img[id^=sm00]').click(function() {
  $('#ProductImage').attr('src', $(this).attr('src'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container col-5">
  <img src="assets/bank/cart.png" id="ProductImage" class="img-fluid" data-toggle="modal" data-target="#exampleModalCenter" alt="Responsive image">
</div>

<div class="12">
  <div class="row">
    <img id="sm001" src="assets/bank/bal1.jpg" alt="img1" class="img-thumbnail">
    <img id="sm001" src="assets/bank/bal2.jpg" alt="img1" class="img-thumbnail">
    <img id="sm002" src="assets/bank/bal3.jpg" alt="img1" class="img-thumbnail">
    <img id="sm003" src="assets/bank/bal4.jpg" alt="img1" class="img-thumbnail">
    <img id="sm004" src="assets/bank/bal5.jpg" alt="img1" class="img-thumbnail">
  </div>
</div>

Answer 1

您可以使用 .data() 来实现此目的，请检查下面更新的代码片段...

$('img[id^=sm00]').hover(function() {
  $('#ProductImage').attr('src', $(this).data('img'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container col-5">
  <img src="https://dummyimage.com/600x400/000/fff" id="ProductImage" class="img-fluid" data-toggle="modal" data-target="#exampleModalCenter" alt="Responsive image">
</div>

<div class="12">
  <div class="row">
    <img id="sm001" src="https://dummyimage.com/60x40/000/fff" alt="img1" class="img-thumbnail" data-img="https://dummyimage.com/600x400/000/fff">
    <img id="sm001" src="https://dummyimage.com/60x40/ff0/fff" alt="img2" class="img-thumbnail" data-img="https://dummyimage.com/600x400/ff0/fff">
    <img id="sm002" src="https://dummyimage.com/60x40/00f/fff" alt="img3" class="img-thumbnail" data-img="https://dummyimage.com/600x400/00f/fff">
    <img id="sm003" src="https://dummyimage.com/60x40/0ff/fff" alt="img4" class="img-thumbnail" data-img="https://dummyimage.com/600x400/0ff/fff">
    <img id="sm004" src="https://dummyimage.com/60x40/f00/fff" alt="img5" class="img-thumbnail" data-img="https://dummyimage.com/600x400/f00/fff">
  </div>
</div>