jquery - 单击图像，图像的名称会显示在 jQuery 中

Question

我有 4 张不同的莫扎特图片，当单击特定图片时，图片的名称将显示在底部。不知道如何在 jquery 中开始。

HTML：

 <a class="art" href=""><img src="mozart.jpg"></a>

CSS：

 .art {
    height: 200px;
    margin-bottom: 20px;
    width: 200px;
 }

Answer 1

jsFiddle在这里。

---

这是一个快速方法的示例：

jQuery：

$('img').click(function(){
    if($(this).next('p').text().length == 0) {
       $(this).next('p').text($(this).attr('src'));
    }
    else {
       $(this).next('p').text('');
    }
});

HTML：

<img src="mozart.jpg">  <p></p>
<img src="mozart2.jpg"> <p></p>
<img src="mozart3.jpg"> <p></p>
<img src="mozart4.jpg"> <p></p>