Не удается переключиться между двумя цветами для div при нажатии на ссылку, чтобы работать

Question

У меня есть эта ссылка:

<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 добавляется класс votedк нему, и когда я снова голосую, класс voted удаляется, но класс unvoted не добавляется.Мне нужно добавить класс unvoted, когда класс voted удален.

Answer 1

Удалите точки с запятой (;) из цвета, который вы передаете .css() во второй функции переключения для каждого селектора (#E9DEDE вместо #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");  
 });

Обновление: Как вы указали, ссылка не будет переходить при применении кода 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: Удалить voted / unvoted:

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/