jQuery – 用动态图像源替换主图像源

我有一个显示的图像列表，每个图像都有一个或多个附加缩略图的列表。

当使用hover在其中一个附加图像上时，主图像必须随附加图像的来源而改变，当鼠标离开该缩略图时，原始主图像源会返回。

我设法使它工作，但它只更新源与循环中找到的最后一个thumnbail，所以我基本上卡在这里是我的代码，目前不工作

  
 
 load($_product->getId()); /* getting additional images url */ foreach ($product->getMediaGalleryImages() as $image) {?>  <a href="https://stackoverflow.com/questions/21256081/jquery-replace-main-image-source-with-dynamic-image-source/getUrl();?>"> <img src="https://stackoverflow.com/questions/21256081/jquery-replace-main-image-source-with-dynamic-image-source/helper('catalog/image')->init($_product, 'thumbnail', $image->getFile())->resize(60, 60); ?>" width="60" height="60" alt="" title="" />    // var newSrc = jQuery('.additionalImg a img').attr('src'); jQuery('.additionalImg a').hover(function(){ jQuery('.mainImg').attr("src", newSrc) });    

非常感谢

Answer 1

更新： 您的codepaste中显示的标记无效，因为您的容器div中有重复的id属性。 您没有在原始问题中明确说明所有显示的代码都重复了几次。 将每个id="product"更改为class="product" ，以下代码将起作用：

 jQuery(document).ready(function() { jQuery('.mainImg').each(function() { $(this).data("original", this.src); }); jQuery('.additionalImg a img').hover(function () { jQuery(this).closest('.product').find('.mainImg').attr("src", this.src); },function() { var $main = jQuery(this).closest('.product').find('.mainImg'); $main.attr("src", $main.data("original")); }); }); 

演示： http ： //jsfiddle.net/s9Rhx/2/

在您的网页上包含一次上述JavaScript，而不是每个产品div一次。

上面的工作原理是首先循环遍历所有mainImg div并存储它们的原始默认图像src。 然后它将事件处理程序直接绑定到缩略图锚点中的img元素。 在hover时，它使用.closest()导航到包含class="product" div（不要忘记将id更改为class ），然后.find()返回到当前的mainImg div容器。

Answer 2

首先，您在同一页面上有多个ID，这是错误的。 我将每个id更改为class，因此它变为class="product"

完整演示： http ： //jsbin.com/AWoNimO/2/edit

您提供的演示HTML – 我为演示添加了几个虚拟图像：

使用Javascript：

 $(function(){ $('.mainImg').each(function(){$(this).data('original', this.src)}); $('.thumb img').hover( function(){ $(this).closest('.product').find('.mainImg')[0].src = this.src; }, function(){ var $mainImg = $(this).closest('.product').find('.mainImg'); $mainImg[0].src = $mainImg.data('original'); } ) }); 

Answer 3

试试这个：

 
  
 
 load($_product->getId()); /* getting additional images url */ foreach ($product->getMediaGalleryImages() as $image) {?>