用相应的点击图像更改图片标题？

Question

我制作了一个包含缩略图的画廊页面，单击后，该图像将显示在上方的主查看器中（我正在工作）。在主查看器下方，会显示一个标题。但是我希望它的标题根据图像而变化，我可以向 javascript 和 HTML 添加什么来实现这一点？

例如单击缩略图 1，图像查看器显示图像 1，标题显示标题 1。

然后点击缩略图 2，图像查看器显示图像 2，标题显示标题 2 等

HTML

<div class="containermain">
<img id="img-main" alt="main image" src="images/placeholder.png" />

<div id="myCaption">Caption</div>

<div class="containerimg">
<img class="img" alt="thumbnail-image1" data-fullsize="images/image1.jpg" src="thumb/image1.jpg" />
<img class="img" alt="thumbnail-image2" data-fullsize="images/image2.jpg" src="thumb/image2.jpg" />
<img class="img" alt="thumbnail-image3" data-fullsize="images/image3.jpg" src="thumb/image3.jpg" />
<img class="img" alt="thumbnail-image4" data-fullsize="images/image4.jpg" src="thumb/image4.jpg" />
<img class="img" alt="thumbnail-image5" data-fullsize="images/image5.jpg" src="thumb/image5.jpg" />
</div>

Javascript

$(document).ready( function() {
    $("img.img" ).on( "click", function( event ) {
        var newSrc= $(this).data("fullsize");          
        $("#img-main").attr("src", newSrc);
    });
});

Answer 1

使用此代码：

    $('img').click(function(){
        var alt = $(this).attr("alt")
        alert(alt)
    });

Answer 2

您只需添加 $('#myCaption').text($(this).attr("alt")) 即可将点击图片的 alt 属性值分配给您的字幕文本。

$(document).ready( function() {
    $("img.img" ).on( "click", function( event ) {
        var newSrc= $(this).data("fullsize");          
        $("#img-main").attr("src", newSrc);
        $('#myCaption').text($(this).attr("alt"));
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="containermain">
<img id="img-main" alt="main image" src="images/placeholder.png" />

<div id="myCaption">Caption</div>

<div class="containerimg">
<img class="img" alt="thumbnail-image1"  data-fullsize="images/image1.jpg" src="thumb/image1.jpg" />
<img class="img" alt="thumbnail-image2"  data-fullsize="images/image2.jpg" src="thumb/image2.jpg" />
<img class="img" alt="thumbnail-image3"  data-fullsize="images/image3.jpg" src="thumb/image3.jpg" />
<img class="img" alt="thumbnail-image4"  data-fullsize="images/image4.jpg" src="thumb/image4.jpg" />
<img class="img" alt="thumbnail-image5"  data-fullsize="images/image5.jpg" src="thumb/image5.jpg" />
</div>

用相应的点击图像更改图片标题？

Change picture caption with corresponding onclicked image?

html

javascript

jquery

image

onclick