停止圖片src改變對多個圖像

我使用：停止圖片src改變對多個圖像

$(function image_swap() { 
    $('.mainthumb').click(function() { 
     $('.main').attr('src', this.src.replace('-thumb', '')) 
    }); 
});

讓我的主圖像變化到不同的圖像被點擊縮略圖時。

但是有一個單頁（有兩個較小的縮略圖下方即一個圖像），因爲它是一個向下頁中列出的產品對這些分組的不止一個。

所以產品之一具有：

與類主縮略圖圖像與類 mainthumb的和與類主拇指的另一個縮略圖圖像的主圖像

產品2具有

一類主要的縮略圖圖像的與類 mainthumb的並與另一個縮略圖圖像

主圖像類主要經驗

等。

因此，當我點擊產品的縮略圖一個所有主要的圖像切換到的縮略圖圖片，因爲它們都具有相同的類 - 有沒有辦法解決，而不對每個產品不同的類？

HTML：

 <li><strong>Complete with:</strong></li> 

     <li>&bull; item 1</li> 

     <li>&bull; item 2</li> 

     <li>&bull; item 3</li>   

    </ul> <img src="../images/image2-thumb.jpg" class="left mainthumb" /> 
    <img src="../images/image3-thumb.jpg" class="left mainthumb" />

由於某些原因，HTML代碼編輯的心不是顯示與類的主要

來源

2014-01-31 John

你可能會考慮的$這個用戶在這裏。如果不使用類名作爲選擇器。使用$這個構造。 –

'mainthumb'類應用於什麼？你可以給一些html代碼或小提琴幫助很多... – Saurabh

jsfiddle：http://jsfiddle.net/8AeHv/2/ – John

你可能會在主圖像的代碼塊以上在這裏考慮$ this的用戶。如果不使用類名作爲選擇器。使用$這個構造。

假設您的每個主圖像都靠近重擊釘組。因此，要找到我們可以用最接近

$(function image_swap() { 
    $('.mainthumb').click(function(){ 
     $(this).prevAll('.main:first').attr('src', $(this).attr('src').replace('-thumb', '')); 
    }); 
    });

這可能並不完美最近的。主要類元素，但是你需要考慮各種選擇的像下一個（），以前的（），並找到什麼最適合你。

來源

2014-01-31 09:08:42

這聽起來像我什麼需要但似乎並沒有工作？ – John

@John你也可以放置你的HTML代碼，也許我們可以通過查看它來爲你提供更好的解決方案。 –

@John剛剛在我的答案中做了一個快速的改變，你可以嘗試新的代碼。 –

你的HTML是有一點問題，如果你可以環繞組圖像與span或div下面的代碼可以工作

$('.mainthumb').click(function() {   
    $(this).parent().find('.main').attr('src', this.src.replace('-thumb', '')) 
});

Check the demo

來源

2014-01-31 09:18:03 Saurabh

停止圖片src改變對多個圖像

回答

相關問題