Javascript Can'；单击链接工作时，无法在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>

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>

此代码的行为是，当我投票时，div将类

投票

添加到其中，当我再次投票时，将删除

投票

类，但不会添加

未启动的

类。当

投票的
类被删除时，我需要添加
未启动的
类。
从每个选择器的第二个切换函数中（
\E9DEDE
）传递给
.css（）
的颜色中删除分号（
；
）：

更新：正如您所指出的，当应用
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);
});

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

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

CSS:

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

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

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

更新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() {
    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);
});

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

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

下面是一个工作示例：
您可以包含生成的HTML标记吗？我不能“读”Ruby代码。是的，只是编辑了问题的细节。酷这使颜色切换工作。但是现在投票被禁用了。。。对此有什么想法吗？另外，如果我删除toggle JS代码，投票会起作用，因此它一定与jQuery代码有关。@Justin：我有一种预感，toggle正在取消引擎盖下链接的默认操作。嗯，我如何使这两件事协调一致？非常优雅的解决方案：）我们就快到了。当我投票时，将添加投票类，但当我再次投票时，将添加未投票类和投票类。未受教育的班级需要被撤走。