javascript - 使用 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> 

What I'd like to do is firstly, change the size of each thumbnail displayed, using runtime JQuery, and then when a thumbnail is clicked, change the main image (uploaded separately) to the src of the thumbnail that was clicked.

我确信可以做到这一点，但还无法使用 .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/

希望这对您有帮助。