创建一个简单的“单击缩略图，更改主图像”代码

Question

我试图根据单击的缩略图来更改主图像。 我希望主图像从单击的缩略图的 a 标签中获取新的 src。

我见过其他使用 attr、src 的方法，但在每种情况下，它们都手动指定新的“src”，我如何获取代码以从单击的缩略图的 a 标签中获取 src？

如果有人能告诉我，我将非常感激，谢谢。

编辑：

尝试更改主照片的标题，从单击的缩略图中获取新标题/我的简化代码看起来像这样，

         <img src="{hotel_main_photo}" id="main_photo" class="view_page_photo frame"      width="420" height="320" alt="{title}" />

        <p>{main_caption}</p>

        <div id="thumbnails">

            <img src="{thumb}" width ="" height="" alt="" />

                            <p>{thumb_caption}</p>

            {/hotel_other_photos}

        </div>

我基本上试图更改“main_caption”以显示单击的缩略图的thumb_caption。我可以将thumb_caption存储为标题或alt，如果这有帮助的话？

再次感谢再次

编辑（！）

我认为使用詹姆斯的建议，我已经通过以下

$("#main_caption").text($(this).attr("alt"));弄清楚了它

Answer 1

像这样的事情应该可以解决问题：

$(".thumbnail").click(function() {
    $("#mainImage").attr("src", $(this).attr("src"));
});

它只是获取单击的 .thumbnail 元素的 src 并将其用作 src 值>#mainImage。