jQuery - Toggle attribute's value?

Question

So I'm creating a cost calculator in jQuery and PHP. I use the following snippet to toggle a button, so user will see what is checked.

$("[data-button='5']").click(function(){
        $("[data-button='5'] .status").attr("src" , "hintalaskurikuvat/greenstatus.png");
        $("[data-button='5']").toggleClass("selected");

        });

But however, it won't toggle the image, I know that. Is there a simple way to toggle between hintalaskurikuvat/greenstatus.png and hintalaskurikuvat/redstatus.png as the src for [data-button='5']?

matendie · Accepted Answer · 2012-11-15 15:57:43Z

7

Here is what I did to have it available as an extension of JQuery (just add this to your *.js file):

(function($) {

$.fn.toggleAttr = function(attribute, value) {
/// <summary>
///     Toggles on/off provided attribute for any tag/element 
/// </summary>
/// <param name="attribute" type="object">
///    Name of attribute to add or remove, eg: checked=""
/// </param> 
/// <param name="value" type="object">
///    Value of the attribute to add or remove, eg: ="checked"
/// </param> 
    if($(this).attr(attribute)){
        $(this).removeAttr(attribute,value);
    }
    else{
        $(this).attr(attribute,value);
    } 
};
})(jQuery);

and simple way of using it:

$('.someclass').toggleAttr('checked', 'checked');

answered Nov 15, 2012 at 15:57

matendie

8031 gold badge9 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Steven Hunt · Accepted Answer · 2012-09-21 18:23:22Z

2

You could do something like this:

var sel = $("[data-button='5']");
sel.find('.status').attr("src", sel.hasClass('selected') ? "greenstatus.png" : "redstatus.png");

answered Sep 21, 2012 at 18:23

Steven Hunt

2,32119 silver badges20 bronze badges

Comments

Claudio Redi · Accepted Answer · 2012-09-21 18:23:18Z

1

Maybe this could work for you

var image;
if ($("[data-button='5']").hasClass("selected"))
    image = "hintalaskurikuvat/greenstatus.png";   
else
    image = "hintalaskurikuvat/redstatus.png";

$("[data-button='5'] .status").attr("src" , image);

answered Sep 21, 2012 at 18:23

Claudio Redi

68.6k15 gold badges138 silver badges161 bronze badges

Comments

j08691 · Accepted Answer · 2012-09-21 18:21:50Z

0

Try adding this in your click function:

$("[data-button='5']").attr("src", ($("[data-button='5']").attr("src")=="hintalaskurikuvat/greenstatus.png") ? "hintalaskurikuvat/redstatus.png":"hintalaskurikuvat/greenstatus.png" );

answered Sep 21, 2012 at 18:21

j08691

208k33 gold badges269 silver badges281 bronze badges

3 Comments

j08691 Over a year ago

Hmmm, works fine when I test it. Perhaps you didn't implement the code as it needs to be.

user1537415 Over a year ago

I just added it after the click event?

j08691 Over a year ago

OK, there were a few things wrong with the fiddle you posted but I corrected them here jsfiddle.net/j08691/JLg7t/1.

Ram · Accepted Answer · 2012-09-21 18:23:06Z

0

$("[data-button='5']").click(function(){
    var $img = $(".status", this);
    var cur = $img.attr("src");
    var fst = 'hintalaskurikuvat/greenstatus.png';
    var scd = 'hintalaskurikuvat/redstatus.png';
    $img.attr('src', cur == fst ? scd : fst);
    $(this).toggleClass("selected");
});

answered Sep 21, 2012 at 18:23

Ram

145k16 gold badges174 silver badges201 bronze badges

1 Comment

user1537415 Over a year ago

Works, but I like the way with less lines ;)

Collectives™ on Stack Overflow

jQuery - Toggle attribute's value?

5 Answers 5

Comments

Comments

Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related