javascript-单击链接进行工作时无法在div的两种颜色之间切换

我有这个链接：

<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>

以及发送POST请求并将表决插入数据库的否决表决.我正在尝试设置样式,以使其在您单击时更改颜色.这是初始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;
}

CSS在箭头形链接周围创建彩色正方形div.然后我有这个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;");  
 });

不过,这似乎不起作用.发生的事情是,首先,投票被禁用.此外,div的颜色会更改一次,但是再次单击时不会更改.我在做什么错,我该如何解决？

更新：

根据要求,这是生成的HTML标记：

<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>

更新2：

这是我现在正在使用的JS代码,如以下答案所述：

    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);
    });

这段代码的行为是,当我投票时,div上添加了有投票的类,当我再次投票时,有投票的类被删除了,但未添加未投票的类.删除投票的类后,我需要添加未投票的类.

解决方法:

在每个选择器的第二个切换函数(#E9DEDE而不是#E9DEDE;)中,从传递给.css()的颜色中删除分号(;)：

$('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");  
 });

更新：正如您所指出的,应用toggle()代码时,将不会跟随该链接.这是因为执行该功能时jQuery取消了链接的默认操作.为了解决这个问题,您可以编写自己的代码,而不使用toggleClass()：

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; }

更新2：要删除已投票/未投票：

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

    if ($this.hasClass("Voted")) {
        $this.removeClass("Voted");
        return "unVoted";
    }
    else {
        $this.removeClass("unVoted");
        return "Voted";
    }
};

更新3,基于以下评论：

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);    
});

这是一个工作示例：http://jsfiddle.net/andrewwhitaker/QuA2K/2/