通過點擊縮略圖與jquery切換照片位置

我想把我的網頁上的照片視圖/幻燈片，我沒有得到我期待的結果。我創建了一個小提琴HERE向你展示我正在嘗試做什麼。我想要它做的是，當你點擊一個縮略圖時，它將縮略圖切換到主要照片點，並將主要照片切換到縮略圖點。它首先工作，但在開始點擊其他縮略圖後，它不會將正確的照片切換到主插槽。另外，如果您重新點擊您剛剛單擊的縮略圖，則它什麼也不做。這裏是我的jQuery代碼，但看看我的小提琴，你將能夠看到我正在嘗試做什麼。通過點擊縮略圖與jquery切換照片位置

$('.thumb1').click(function() { 
    $('.thumb1, .main').fadeIn().toggleClass('thumb1 main'); 
}); 

$('.thumb2').click(function() { 
    $('.thumb2, .main').fadeIn().toggleClass('thumb2 main'); 
}); 

$('.thumb3').click(function() { 
    $('.thumb3, .main').fadeIn().toggleClass('thumb3 main'); 
}); 

$('.thumb4').click(function() { 
    $('.thumb4, .main').fadeIn().toggleClass('thumb4 main'); 
});

來源

2014-02-26 McCoy

我改變你的類類似於如何Joao沒有，但我的JavaScript是一個有點不同

$('.thumb').click(function() { 
    var newHTML = this.innerHTML; 
    this.innerHTML = $('.main')[0].innerHTML 
    $('.main').html(newHTML); 
});

而不是僅僅改變src，你也將保持圖像的所有其他屬性，如alt屬性，您應該將其添加到圖像中以實現輔助功能。

我並沒有實現沒有點擊一個相同的想法什麼也不做，因爲那樣的話，如果他們想看看他們只是看着他們不能像。

的jsfiddle：http://jsfiddle.net/howderek/RfKh4/6/

來源

2014-02-26 15:13:35 howderek

嘿，謝謝，你的答案都很好。我沒有說清楚，但是當我點擊相同的圖像時，我的代碼沒有做任何事情，我希望它能夠做你的兩個代碼。 – McCoy

我在看你的代碼，我不會推薦在類似元素之間切換類，因爲它可能會拋出像你這樣的一些錯誤。我打得四處你的代碼，並簡化了一點：

$('.thumb').click(function() { 
    var previousSrc = $('.main').children().attr('src'); 
    $('.main').children().attr('src', $(this).children().attr('src')); 
    $(this).children().attr('src', previousSrc); 
});

下面是更新小提琴：http://jsfiddle.net/RfKh4/5/

基本上我做的是保存。主要的div圖像以前src屬性previousSrc然後我將div的圖像更改爲縮略圖中的圖像。最後，將縮略圖的圖像更改爲.main div上的圖像。希望它可以幫助你！

來源

2014-02-26 15:10:59 Joao

你的代碼的偉大工程，但我與@howderek打算作爲他的還包括改變，我在我的實際代碼中使用了alt屬性。 – McCoy

是的，我也讀過他的答案，你應該和他一起去，因爲它好一點！ – Joao

通過點擊縮略圖與jquery切換照片位置

回答

相關問題