Can't get toggling between two colors for div when clicking a link to work

I have this link:

<div id='up_arrow_div'> 
<%= link_to "&uArr;".html_safe, video_votes_path( :video_id => video.id, :type => "up" ), :method => :post, :remote => true, :class => 'up_arrow' %>
</div>

as well as a down vote one that sends a POST request and inserts a vote into the database. I'm trying to set up styling so that it changes colors when you click it. Here's the initial CSS:

a.up_arrow:link, a.down_arrow:link {
color: black;
text-decoration: none;  
font-size: 25px;
margin-left: 7px;
}

#up_arrow_div, #down_arrow_div {
display:block;
background-color:#DFEAF4;
width:30px;
}

The CSS creates a colored square div around the arrow-shaped link. Then I have this jQuery:

$('a.up_arrow').toggle(function () {
    $('#up_arrow_div').css("background-color", "#19558D");
     }, function () {
        $('#up_arrow_div').css("background-color", "#E9DEDE;"); 
 });

 $('a.down_arrow').toggle(function() {
     $('#down_arrow_div').css("background-color", "#19558D");
 }, function () {
         $('#down_arrow_div').css("background-color", "#E9DEDE;");  
 });

This doesn't seem to work though. What happens is that first of all, the voting becomes disabled. Also, the color of the div changes once, but it doesn't change back when you click it again. What am I doing wrong and how can I fix it?

UPDATE:

As requested, here is the generated HTML markup:

<div id="voting_div">
  <div id="up_arrow_div">   
  <a href="/video_votes?type=up&amp;video_id=448" class="up_arrow" data-method="post" data-remote="true" rel="nofollow">⇑</a>
  </div>
  <div id="vote_display">
    <p id="votes">0 Votes</p>
  </div>
  <div id="down_arrow_div">
  <a href="/video_votes?type=down&amp;video_id=448" class="down_arrow" data-method="post" data-remote="true" rel="nofollow">⇓</a>
  </div>
</div>

UPDATE 2:

Here's the JS code I'm using now, as explained by the answer below:

    var toggleVoting = function() {
        if ($(this).parent().hasClass("voted")) {
            return "unvoted";
        }
        else {
            return "voted";
        }
    };

    $('a.up_arrow').click(function() {
        $(this).parent().toggleClass(toggleVoting);
    });

    $('a.down_arrow').click(function() {
        $(this).parent().toggleClass(toggleVoting);
    });

The behavior of this code is that when I vote, the div has the class voted added to it, and when I vote again, the开发者_JAVA技巧 voted class is removed, but the unvoted class is not added. I need to add the unvoted class when the voted class is removed.

Remove the semicolons (;) from the color you're passing to .css() in your second toggle function for each selector (#E9DEDE instead of #E9DEDE;):

$('a.up_arrow').toggle(function () {
    $('#up_arrow_div').css("background-color", "#19558D");
     }, function () {
        $('#up_arrow_div').css("background-color", "#E9DEDE"); 
 });

 $('a.down_arrow').toggle(function() {
     $('#down_arrow_div').css("background-color", "#19558D");
 }, function () {
         $('#down_arrow_div').css("background-color", "#E9DEDE");  
 });

Update: As you pointed out, the link won't be followed when the toggle() code is applied. This is because jQuery cancels the default action of the link when that function is executed. To get around that, you could write your own code that uses toggleClass() instead:

JavaScript:

var toggleVoting = function() {
    if ($(this).hasClass("voted")) {
        return "unvoted";
    }
    else {
        return "voted";
    }
};

$('a.up_arrow').click(function() {
    $("#up_arrow_div").toggleClass(toggleVoting);
});

$('a.down_arrow').click(function() {
    $("#down_arrow_div").toggleClass(toggleVoting);
});

CSS:

.voted { background-color: #19558D; }
.unvoted { background-color: #E9DEDE; }

Update 2: To remove voted/unvoted:

var toggleVoting = function() {
    var $this = $(this);

    if ($this.hasClass("voted")) {
        $this.removeClass("voted");
        return "unvoted";
    }
    else {
        $this.removeClass("unvoted");
        return "voted";
    }
};

Update 3, based on comments below:

var toggleVoting = function() {
    var $this = $(this);

    if ($this.hasClass("voted")) {
        $this.removeClass("voted");
        return "unvoted";
    }
    else {
        $this.removeClass("unvoted");
        return "voted";
    }
};

$('a.up_arrow').click(function(e) {
    e.preventDefault();
    var $downArrow = $("#down_arrow_div");
    if ($downArrow.hasClass("voted")) {
        $downArrow.addClass("unvoted").removeClass("voted");
    }
    $("#up_arrow_div").toggleClass(toggleVoting);
});

$('a.down_arrow').click(function(e) {
    e.preventDefault();
    var $upArrow = $("#up_arrow_div");
    if ($upArrow.hasClass("voted")) {
        $upArrow.addClass("unvoted").removeClass("voted");
    }
    $("#down_arrow_div").toggleClass(toggleVoting);    
});

Here's a working example: http://jsfiddle.net/andrewwhitaker/QuA2K/2/