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，它对我有用。

这是示例代码和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/

希望这会对你有所帮助。

通过使用jQuery单击缩略图来更改主图像的src

1 个答案: