Geek asks and answers

Cannot switch between two colors for div when clicking work link

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>

and also voted, which sends a POST request and inserts the vote into the database. I'm trying to tweak the style so that it changes colors when you click on 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;
}

CSS creates a colored square div around the arrow 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 does not seem to work. It happens that in the first place, voting becomes disconnected. In addition, the color of the div changes once, but when you click it again, it does not change. What am I doing wrong and how can I fix it?

UPDATE:

As requested, the generated HTML markup is presented here:

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

, , div voted, , , voted , unvoted . unvoted, voted .

+3
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/

+4

More articles:


All Articles