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/

希望对您有所帮助。