通過使用jQuery單擊縮略圖來更改主圖像的src

Question

這是我面臨的挑戰：

在開發時，我不知道圖像的src，因為它們都是通過tinyMCE文本編輯器添加的。 因此，使用圖像上傳插件將4個圖像上傳到編輯器中，因此存儲在數據庫中的所有內容都是一些HTML，例如

<p>
    <img src="../image_uploads/Golf_Resize_2.jpg" alt="" /> 
    <img src="../image_uploads/Golf_Resize_3.jpg" alt="" /> 
    <img src="../image_uploads/Golf_Resize_41.jpg" alt="" /> 
    <img src="../image_uploads/Golf_Resize_5.jpg" alt="" />
</p> 

我想要做的是首先，使用運行時JQuery更改顯示的每個縮略圖的大小，然后單擊縮略圖時，將主圖像（單獨上載）更改為單擊的縮略圖的src。

我確信它可以完成，但還沒有能夠使用.attr（'src'...

幫助將非常感激。 謝謝。

所以回顧一下，有一個主圖像和4個縮略圖。 我希望主圖像根據我點擊的縮略圖進行更改。 但是，這是一個很大的'但'，我不知道圖像文件（src）的名稱，直到運行時，只能從HTML中提取它。 因此，使用JQuery，我需要做一些有效的事情：

獲取上面的HTML並將其呈現為帶有類的DIV標記。

告訴JQuery使該DIV類中的每個圖像都具有一定的大小（縮略圖）。

使用JQuery，添加一個onclick事件，該事件采用該特定縮略圖的src（可能使用“this”）並更改主圖像的src以顯示所單擊縮略圖的完整版本。

希望有道理。

Answer 1

我嘗試使用attr ，它對我attr 。

這是示例代碼和jsfiddle鏈接：

HTML：

<img src="http://paramwebeek.com/wp-content/uploads/2013/09/demo.png" class="thumb" />
<img src="http://paramwebeek.com/wp-content/uploads/2013/09/demo.png" class="thumb" />
<img src="http://paramwebeek.com/wp-content/uploads/2013/09/demo.png" class="thumb" />
<img src="http://paramwebeek.com/wp-content/uploads/2013/09/demo.png" class="thumb" />

JS：

$('.thumb').click(function(){
    $(this).attr('src', 'http://www.toolsformoney.com/financial_software_demos.jpg');
});

jsfiddle： http ： //jsfiddle.net/tejashsoni111/MNk4z/

更新

我閱讀了你的問題的其他信息，根據我的理解，我更新了我的代碼。 這是jsfiddle的鏈接： http ： //jsfiddle.net/tejashsoni111/MNk4z/2/

希望這會幫助你。