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

Change src of #contentImg to image within link which was clicked

本文关键字：单击 链接 图像 #contentImg src      更新时间：2023-09-26

我设置了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

这

应该适用于jQuery>=1.7：

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

JSFiddle

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

相关文章：