单击图像，图像的名称显示在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 here.

---

以下是一个快速实现方法的示例::

<强> 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>