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

Question

我设置了 jquery mobile listview。我想使用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