JQuery Toggle Image not working

Question

I am simply trying to toggle the image source with a click using JQuery. My script is below, I am not sure why it's not toggling. When the page first loads, if you click the gray image, it toggles to the color image. But if you click the gray image, nothing happens. So it changes on the first click but nothing happens if you click after the first click.

<script type="text/javascript">
    $(document).ready(function () {
        $('#imageid').click(function () {
            if ($(this).attr('src', 'imagegray.png')) {
                $(this).attr('src', 'imagecolor.png');
            }
            else if ($(this).attr('src', 'imagecolor.png')) {
                $(this).attr('src', 'imagegray.png');
            }
        })
    });
</script>

Answer 1

You need to compare src attribute. Currently you are setting them in if's condition block

 $('#imageid').click(function () {
     if ($(this).attr('src') === 'imagegray.png') {
         $(this).attr('src', 'imagecolor.png');
     }
     else if ($(this).attr('src') === 'imagecolor.png') {
         $(this).attr('src', 'imagegray.png');
     }
 })