單擊更改每個圖像jquery

我有一個小問題，試圖在Magento基礎腳本中處理目錄產品列表，它將圖像關聯到產品列表，並點擊它更改主圖像。單擊更改每個圖像jquery

問題是，點擊所有圖像被改變。

我該如何改變只點擊的圖像？並將主圖像移至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/

任何幫助是非常讚賞。

來源

2014-01-29 Dario

試試下面這段代碼：

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

來源

2014-01-29 14:42:02 Felix

由於菲利克斯，另一種快速的問題，如果我想把主圖像的moreviewlist？，我的意思是讓愨上單擊顯示的開關。 – Dario

我不明白你的意思。你想在moreviewlist裏面移動主圖像？你能否詳細說明你的問題。 – Felix

因此，當您從底部點擊縮略圖時，它會更改主圖像，但主圖像消失，只有在刷新頁面時我才能切換回主圖像，所以我認爲如果點擊縮略圖，將縮略圖將data-main-image-src添加到主圖像，並將主圖像添加到data-main-image-src中。 – Dario

您不必HTTP源你replacing.you需要使用：

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

Demo

來源

2014-01-29 14:44:26

嗨米林德，謝謝你的回答，是的，圖像只是一個例子。謝謝 – Dario

使用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

來源

2014-01-29 14:50:57

單擊更改每個圖像jquery

回答

相關問題