通过点击使用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/

希望这会帮助你。