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');
     }
 })

Answer 2

You need to get the source value of your image then compare it with the expected name that you want, currently you're doing it wrongly, change your code to:

$('#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');
    }
})

Fiddle Demo

Answer 3

Other suggestions will achieve what you want, but I believe that it'll get better if you work with classes

For example, your image will always have the active class and when you click will insert / delete the inactive class:

$(this).toogleClass('inactive');

Answer 4

Here's the same thing done in few different ways. They all do the same thing, with varying degrees of compactness.

The last one is probably most convenient and the most flexible one. You never have to touch your javascript to change the image src values.

---

http://jsfiddle.net/yPAqY/

Html:

<img id="imageid" src="imagegray.png" alt="">

jQuery:

$(document).ready(function () {

    $('#imageid').on("click", function () {

        var obj = $(this),
            objAttr = obj.attr('src'),
            first_img = 'imagegray.png',
            second_img = 'imagecolor.png';

        if (objAttr === first_img) {
            obj.attr('src', second_img);
        } else if (objAttr === second_img) {
            obj.attr('src', first_img);
        }

    });

});

---

http://jsfiddle.net/yPAqY/1

Html:

<img id="imageid" src="imagegray.png" alt="">

jQuery:

$(document).ready(function() {

    $('#imageid').on("click", function() {

        var obj = $(this),

            first_img = 'imagegray.png',
            second_img = 'imagecolor.png',

            imgs = obj.attr('src') == first_img ? second_img : first_img;

        obj.attr('src', imgs);

    });

});

---

http://jsfiddle.net/yPAqY/2/

Html:

<img id="imageid" src="imagegray.png" data-img2="imagecolor.png" alt="">

jQuery:

$(document).ready(function() {

    var image = $('#imageid'),
        imageSrc = image.attr('src'),
        imageData = image.data('img2');

    image
        .removeAttr('data-img2')
        .on("click", function() {

            var obj = $(this),
                imgs = obj.attr('src') == imageSrc ? imageData : imageSrc;

            obj.attr('src', imgs);

        });

});

Answer 5

place two images in seperate class

and toggle the class you can see the effect