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中，而gallery则保留了画廊图片。因此，您真正想要的是选择嵌套在图库图像父级的兄弟元素中的图像元素。

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

将您的main-image和$("div.gallery li img").hover(function () { $(this).closest('.imageselector').prev('.mainimage').find('img').attr('src', $(this).attr('src').replace('thumb/', '')); });从ID更改为班级
在悬停功能中实现以下代码：
```
.imageselector
```

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

每当徘徊在画廊图像上时，请选择其最接近的父类别.mainimage
获取具有.mainimage类的最接近的父级的上一个兄弟级
在Android Studio中找到图像元素
像以前一样设置属性

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

1 个答案: