How to swap images on click jquery [duplicate]

Question

The footer has icons on click. I want to swap images with the header image, it will be helpful if I get any suggestions.

Have a look Jsfiddle

<ul>
    <li>
        <a href="#">
            <img src="img/q.jpg">
        </a>
    </li>

    <!-- codepen - your codepen profile-->
    <li>
        <a href="#">
            <img src="img/q1.jpg">
        </a>
    </li>

    <!-- codepen - your codepen profile-->
    <li>
        <a href="#">
            <img src="img/f.jpg">
        </a>
    </li>

    <!-- codepen - your codepen profile-->
    <li>
        <a href="#">
            <img src="img/q2.jpg">
        </a>
    </li>
</ul>

Answer 1

Here's a sample snippet.

$(img).on('click', function(e)
{
   $("#iq").attr("src", $(this).attr("src"));
})

This code will react on every image you click however, it should be self explanatory how to get the desired functionality from here.

Answer 2

You can use the following code for swapping the image clicked in the footer with the header image every time you click any of the footer images.

$('ul img').click(function(){

    var header_src = $('header img').attr('src');

    $("header img").attr('src', $(this).attr('src'));
    $(this).attr('src', header_src);

});