javascript - 将 #contentImg 的 src 更改为单击的链接中的图像

Question

我设置了 jquery 移动列表视图。我想使用 jQuery 将 #contentImg 的 src 更改为单击的图像缩略图的 src。

因此，当单击 'ul data-role="listview"' 中的 'a' 时，我希望 '#contentImg' 的 src 到 $this 中的 img（这是单击的 'a' 标记）。

我怎么能用 jQuery 做到这一点？

代码如下

    <ul data-role="listview">
        <li><a href="#content">
            <img src="image1.jpg" />
            <h3>Image1</h3>
            <p>Description</p>
        </a></li>
        <li><a href="#content">
            <img src="image2.jpg" />
            <h3>Image2</h3>
            <p>Description</p>
        </a></li>
     </ul>  

在文档中进一步

<img id="contentImg" src="contentImg.jpg" />

只是为了澄清单击第一个链接的时间#contentImg src应该更改为image1.jpg，如果单击第二个链接它将是image2.jpg

Answer 1

这应该适用于 jQuery >=1.7：

$('li a[href="#content"]').on('click', function(){
    $('#contentImg').attr('src', $(this).find('img').attr('src'));
});

JSFiddle

如果使用 jQuery <1.7 .on，则交换.live