title: javascript: Switching one pair of class
body: <p>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:</p>
  
  <pre><code>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");
  }
  </code></pre>
  
  <p>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? </p>