Question

On Stackoverflow site, the voting arrow initially it can be “vote-up-off”/”vote-down-off” if a user hasn’t voted. It can also be one up / another down if the user voted before. Start from this 3 cases, upon the user click, I want to switch class. With help of nice people on this site, I arrived this code so far:

if($("a.vote-up-down").hasClass("vote-up-on")){
    $(".vote-up-on").removeClass("vote-up-on").addClass("vote-up-off");
    $(".vote-down-off").removeClass("vote-down-off").addClass("vote-down-on");
}
else if($("a.vote-up-down").hasClass("vote-down-on")){
    $(".vote-down-on").removeClass("vote-down-on").addClass("vote-down-off");
    $(".vote-up-off").removeClass("vote-up-off").addClass("vote-up-on");
}

This works if you don’t click up arrow again when it is already vote-up-on, or you don’t click down arrow again when it is already vote-down-on. Otherwise, it keeps switching disregarding the actual vote. If initially both arrow is off, this code will change both.
In my ajax function, I can provide response message of actual vote value ( 1 or -1), How can I correct the above code?

Answer 1

The whole thing is easier if you don’t use vote-up-on and vote-down-on as different class names. Just toggle one class on: http://jsfiddle.net/ghSEb/.

$(".vote").on("click", function() {
    $(".vote").not(this).removeClass("on");  // make sure to remove other vote
    $(this).toggleClass("on");​​​​​​​​​               // switch this one
});