How do I toggle an attribute on click using jQuery?

Question

I have an image that i want to change when someone clicks the button above it (from image1.jpg to image2.jpg) I currently have a jQuery that changed the picture but i cant get it to change back if i click the button again.

In addition, I also want it so that, if i were to click on another button that would change another set of images, to have any image that has already been change to go back to their initial image.

Example: I click a button that changed image1.jpg to image2.jpg Then i click a button that changes image3.jpg to image4.jpg, but it also changes image2.jpg back to image 1.

This is my current jQuery:

$(document).ready(function() {
 $("#btn1").click(function() {
     $("#blue").toggle(function() {
        $(this).attr('src', 'images/image2.jpg');
     });
  });
});

HTML

<button id="btn1"> CLICK ME </button>
<br>
<img id="blue" src="images/image1.jpg">
<br><br>
<button> CLICK ME </button>
<br>
<img id="green" src="images/image3.jpg">

possible duplicate of [Toggling an image src with jQuery](http://stackoverflow.com/questions/19057513/toggling-an-image-src-with-jquery) — bencripps, Aug 19 '14 at 20:14

score 1 · Answer 1 · answered Aug 19 '14 at 20:16

Try this:

$(function() {
  $("#btn1").on('click', function() {
     if ($(this).hasClass('toggled-image')) {
        // remove flag that button has been clicked
        $(this).removeClass('toggled-image');

        // change image back to image1.jpg
        $("#blue").attr('src', 'images/image1.jpg');
     } else {
        // add flag that button has been clicked
        $(this).addClass('toggled-image');

        // change image to image2.jpg
        $("#blue").attr('src', 'images/image2.jpg');
     }
   });
});

You just simply add some kind of flag to the button that it has been clicked. You can do this by having a global variable flag or by just adding a class name to the button.

user32342534 · Answer 2 · 2014-08-19T20:36:12.010

0

$(document).ready(function() {
 $("#btn1").click(function() {

     $("#blue").toggle(function() {
        var flag = $(this).attr('src') == 'images/image2.jpg' ? 'images/image1.jpg' : 'images/image2.jpg';
        $(this).attr('src', flag);
     });

 });
});

Like this you could use a flag to "toggle" the src.

The construct used ?: is the conditional ternary.

Also this of course only does work, if you never change or add the names of the images. This solution is not dynamic!

What I actually think you want with toggle is

HTML

<img src="images/image1.jpg">
<img src="images/image2.jpg" style="display:none">

JS

$("#blue").click(function() {
   $('img').toggle()
});

edited Aug 19 '14 at 20:36

answered Aug 19 '14 at 20:19

user32342534

145
6

you are using one of the preserved key words `switch`. Need to change that. And even though I have nothing against your solution I would not compare `src` to hardcoded `images/image2.jpg` what if the name of that image changes? – GGio Aug 19 '14 at 20:20
I added `toggle` as you prefer to want! – user32342534 Aug 19 '14 at 20:38

score 0 · Answer 3 · answered Aug 19 '14 at 20:21

You probably want to do this with one image tag and change its source.

HTML

<button id="btn1"> CLICK ME </button>
<br>
<img src="images/image1.jpg">

JS

$(document).ready(function() {
  $("#btn1").click(function() {
    var elm = $("#blue")
    var src = elm.attr('src');
    if(src === "images/image2.jpg")
      elm.attr('src', 'images/image1.jpg');
    else
      elm.attr('src', 'images/image2.jpg');
  });
});

You could improve on this by using a class, since it is messy to hardcode image paths in your JS. Using something like:

if(elm.hasClass('isBlue') {
  //change src and remove class
else
  //change src and add class

score 0 · Answer 4 · answered Aug 19 '14 at 20:21

I don't believe toggle is really the best option here. How about css classes and jquery:

html

<body>
    <button id='btn1' >Click Me</button>
</body>

javascript

$(document).ready(function() {
    $("#btn1").click(function(e) {
        if($(this).hasClass("clicked")) {
            $(this).removeClass("clicked");
        } else {
            $(this).addClass("clicked");
        }
    });
});

css

button
{
     background-image: url('/images/image1.jpg');
}

button .clicked
{
     background-image: url('/images/image2.jpg');
}

score 0 · Accepted Answer · edited May 23 '17 at 12:13

I really liked this solution I came across a while ago: https://stackoverflow.com/a/4911660/1524085

JSFIDDLE DEMO

code:

(function($) {
    $.fn.clickToggle = function(func1, func2) {
        var funcs = [func1, func2];
        this.data('toggleclicked', 0);
        this.click(function() {
            var data = $(this).data();
            var tc = data.toggleclicked;
            $.proxy(funcs[tc], this)();
            data.toggleclicked = (tc + 1) % 2;
        });
        return this;
    };
}(jQuery));

and this is how its used (see demo):

$("#btn1").clickToggle(function () {
    $("#blue").attr('src', 'http://placehold.it/350x150&text=2');
}, function () {
    $("#blue").attr('src', 'http://placehold.it/350x150&text=1');
});

How do I toggle an attribute on click using jQuery?

5 Answers5