通過點擊使用jQuery

Question

這裏縮略圖更改主圖像的src是我面臨的挑戰：

在開發時，我不知道該圖像的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，它爲我工作。

這是示例代碼和的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/

希望這會幫助你。