javascript - jQuery - 用动态图像源替换主图像源

Question

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

当鼠标悬停在其中一张附加图像上时，主图像必须随该附加图像的源而变化，并且当鼠标离开该缩略图时，原始主图像源将返回。

我设法让它工作，但它只更新循环中找到的最后一个缩略图的源，所以我基本上被困在这里是我的代码目前无法工作

<div>
    <img class="mainImg" src="http://mysource.com/img.jpg"/>
</div>

<div class="additionalImg">

     <?php
     $product = Mage::getModel('catalog/product')->load($_product->getId());
     /* getting additional images url */
    foreach ($product->getMediaGalleryImages() as $image) {?>

    <!-- thumbnails -->
        <a href="<?php echo $image->getUrl();?>">
            <img src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail', $image->getFile())->resize(60, 60); ?>" 
            width="60" height="60" alt="" title="" />
        </a>
    <!-- end thumbnails -->

    <script>
    // var newSrc = jQuery('.additionalImg a img').attr('src');
    jQuery('.additionalImg a').hover(function(){
            jQuery('.mainImg').attr("src", newSrc)
        });
    </script>

        <?php };?>
</div>

非常感谢

Answer 1

更新: your 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。然后它将事件处理程序直接绑定(bind)到缩略图 anchor 中的 img 元素。悬停时，它使用 .closest() 向上导航到包含 class="product" div(不要忘记更改 id到 class)，然后 .find() 返回到当前容器内的 mainImg div。