Question

我有一个小问题，试图在基于Magento的脚本中处理目录产品列表，该脚本将图像关联到产品列表，点击它会更改主图像。

问题在于点击所有图像都已更改。

如何更改所点击的图片？并将主图像移动到data-main-image-src点击。

在代码下面使用。

HTML：

<li class="item first">
    <a href="http://localhost/product.html" title="Product" class="product-image"><img class="MainImage" src="//lorempixel.com/60/60/food/1/" width="155" height="145" alt="Product"></a>
    <div class="moreviewslist">
        <img data-main-image-src="//lorempixel.com/60/60/food/2/" src="//lorempixel.com/60/60/food/2/">
        <img data-main-image-src="//lorempixel.com/60/60/food/3/" src="//lorempixel.com/60/60/food/3/">
    </div>
    <h2 class="product-name"><a href="http://localhost/product.html" title="Product">Product</a></h2>
</li>

Jquery：

jQuery(document).ready(function()
            {
                jQuery(".moreviewslist img").click(function()
                {
                    jQuery(".MainImage").attr("src", jQuery(this).attr("data-main-image-src"));
                });
            });

JSFiddle示例： http://jsfiddle.net/neocastelli/8YxnR/2/

非常感谢任何帮助。

Answer 1

请尝试以下代码：

jQuery(".moreviewslist img").click(function() {
    jQuery(this).parent().prev().find('img').attr("src", jQuery(this).attr("data-main-image-src"));
});

Answer 2

您没有替换源的http。您需要使用：

 jQuery(".MainImage").attr("src","http:"+ jQuery(this).attr("data-main-image-src"));

<强> Demo

Answer 3

使用closest遍历li，然后使用find查找img.MainImage

jQuery(".moreviewslist img").click(function() {
    jQuery(this).closest('li').find('.MainImage').attr("src", jQuery(this).attr("data-main-image-src"));
});

FIDDLE

单击Jquery更改每个图像

3 个答案: