Question

I have jquery mobile listview set up. I want to use jQuery to change the src of #contentImg to the src of the image thumbnail which is clicked.

So when an ‘a’ that is in a ‘ul data-role=”listview”‘ is clicked I want the src of ‘#contentImg’ to the img within $this(this being ‘a’ tag clicked).

How can I do this with jQuery?

Code is as follows

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

Further in the document

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

Just to clarify when the first link is clicked #contentImg src should change to image1.jpg and if second was clicked it would be image2.jpg

Answer 1

This should work on jQuery >=1.7:

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

JSFiddle

Swap .on by .live if using jQuery <1.7