为什么一个图像交换会影响另一个图像？

Question

我目前正在尝试让它与 2 个主图像和随附的选择器一起使用，但最终会有多个变体。

我的图像交换脚本有效，将鼠标悬停在缩略图上会将主图像源更改为缩略图的源，但是它会更改两者的主图像，而不仅仅是缩略图所在的那个。

脚本当前同时更改：

$(document).ready(function() {
  // Image swap on hover
  $("div.product li img").hover(function() {
    $('img.productimg').attr('src', $(this).attr('src').replace('thumb/', ''));
  });
  var imgSwap = [];
  $("div.product li img").each(function() {
    imgUrl = this.src.replace('thumb/', '');
    imgSwap.push(imgUrl);
  });
  $(imgSwap).preload();
});
$.fn.preload = function() {
  this.each(function() {
    $('<img/>')[0].src = this;
  });
}

当前的html格式分解：

<div class="product" class="gallery">
   <div class="mainimage">
      <img class="productimg" src="images/1.jpg" class="main-img">
   </div>
   <div class="imageselector">
      <ul>
         <li><img class="prod-thumbs" src="images/1.jpg"></li>
         <li><img class="prod-thumbs" src="images/2.jpg"></li>
         <li><img class="prod-thumbs" src="images/3.jpg"></li>
      </ul>
   </div>
</div>
<div class="product" class="gallery">
   <div class="mainimage">
      <img class="productimg" src="images/4.jpg" class="main-img">
   </div>
   <div class="imageselector">
      <ul>
         <li><img class="prod-thumbs" src="images/artwork/artist1/modal/4.jpg"></li>
         <li><img class="prod-thumbs" src="images/artwork/artist1/modal/5.jpg"></li>
         <li><img class="prod-thumbs" src="images/artwork/artist1/modal/6.jpg"></li>
      </ul>
   </div>
</div>

来自@Terry，我现在已经合并了这个脚本，目的是图像选择器只影响它被分组/最接近的主图像。然而，这似乎已经阻止了悬停功能以任何身份工作，我发现让它工作的唯一方法是将它恢复到以前的脚本。

$(document).ready(function() {
  // Image swap on hover
  $("div.product li img").hover(function() {
    $(this).closest('.imageselector').prev('.productimg').find('img').attr('src', $(this).attr('src').replace('thumb/', ''));
  });
  var imgSwap = [];
  $("div.product li img").each(function() {
    imgUrl = this.src.replace('thumb/', '');
    imgSwap.push(imgUrl);
  });
  $(imgSwap).preload();
});
$.fn.preload = function() {
  this.each(function() {
    $('<img/>')[0].src = this;
  });
}

Answer 1

您的主要问题在于此块中的逻辑：

$("div#gallery li img").hover(function () {
    $('img#main-img').attr('src', $(this).attr('src').replace('thumb/', ''));
});

除了重复 ID 问题（你不应该在文档中回收 ID，因为它们必须是唯一的），你遇到的问题是对于你悬停的每个画廊图像，它只会选择 jQuery 找到的任何主图像DOM。你想要的是选择与画廊图像上下文相关的主图像：在这种情况下，主图像嵌套在div.mainimage 中，它是div.imageselector 的兄弟，而div.imageselector 又包含画廊图像。所以你真正想要的是选择嵌套在图库图像父级的兄弟元素中的图像元素。

要解决您的问题，您需要：

1. 将您的 gallery 和 main-image 从 ID 更改为类

2. 在悬停函数中实现以下代码：

   $("div.gallery li img").hover(function () {
       $(this).closest('.imageselector').prev('.mainimage').find('img').attr('src', $(this).attr('src').replace('thumb/', ''));
   });
   

上面的逻辑可以这样分解：

1. 只要将图库图像悬停在其上，请选择其最近的具有.imageselector 类的父级
2. 获取具有.mainimage 类的最近父级的上一个兄弟级
3. 在.mainimage中找到图片元素
4. 像以前一样设置属性