Question

Need to specify a ID and its changed class name to change it back. Am toggling between 3 buttons on an HTML jukebox. So if the same button (rock) is clicked again after selecting it – rock goes silent.

Button action to initiate the button (1 of 3 buttons)

$("a#butblue").click(function(){
    stopall();
    $.fn.soundPlay({url: '../audio/lounge.mp3', playerId: 'embed_playerB', command: 'play'}); 

    $("a#butblue").removeClass("blue_off");

    $("a#butgreen").removeClass("green_on");
    $("a#butgreen").addClass("green_off");
    $("a#butorange").removeClass("orange_on");
    $("a#butorange").addClass("orange_off");

    $("a#butblue").addClass("blue_on");
});

function stopall() {
    $.fn.soundPlay({playerId: 'embed_playerB', command: 'stop'});
    $.fn.soundPlay({playerId: 'embed_playerG', command: 'stop'});
    $.fn.soundPlay({playerId: 'embed_playerO', command: 'stop'});   
}

And now if a#butblue.blue_on is clicked again I want it to turn off. Attempting to use the following but somehow I seem to not be connecting the ID and the changes class name. I can see them in firebug, it is changing class. Just cant seem to get a handle on it. Can this be done? (its gotta be).

:

$("a#butblue.blue_on").click(function(){
    stopall();  
    $.fn.soundPlay({playerId: 'embed_playerB', command: 'stop'});
    $("a#butblue").removeClass("blue_on");
    $("a#butblue").addClass("blue_off");
});

Answer 1

Can’t you just do it by checking if the element has the class blue_or or blue_off like so (if I understand you correctly)

$("a#butblue").click(function(){
    var btn = $(this);
    if(btn.hasClass('blue_on'){
        //do your stuff when it is on
    }else if(btn.hasClass('blue_off'){
        //do your stuff when it is off
    }else{
        //do stuff when no class has been added
    }
});