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

Question

我有jquery mobile listview设置。我想使用jQuery将#contentImg的src更改为单击的图像缩略图的src。

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

我该如何做到这一点与jQuery？

码作为文件

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

只是为了澄清，当第一链接被点击#contentImg SRC在

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

此外如下应更改为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

交换.on通过.live如果使用jQuery < 1.7