Vote up/down

With switch statement

by someprimetime

HTML

<div class="js-vote-container" data-original-score="0"
data-up-votes="12" data-down-votes="10" data-voted="true">
  <button data-direction="up" class="up js-vote active"></button>
  <span class="js-vote-count">2</span>
  <button data-direction="down" class="down js-vote"></button>
</div>
<div class="js-vote-container" data-original-score="0"
data-up-votes="10" data-down-votes="12" data-voted="true">
  <button data-direction="up" class="up js-vote active"></button>
  <span class="js-vote-count">0</span>
  <button data-direction="down" class="down js-vote"></button>
</div>

<div class="js-vote-container" data-original-score="0"
data-up-votes="12" data-down-votes="10" data-voted="true">
  <button data-direction="up" class="up js-vote active"></button>
  <span class="js-vote-count">2</span>
  <button data-direction="down" class="down js-vote"></button>
</div>

<div class="js-vote-container" data-original-score="0"
data-up-votes="12" data-down-votes="10" data-voted="false">
  <button data-direction="up" class="up js-vote"></button>
  <span class="js-vote-count">2</span>
  <button data-direction="down" class="down js-vote"></button>
</div>

CSS

button {
    cursor: pointer;
    border: none;
    padding:5px;
}

.up.active {
    background: blue;
    color: white;
}

.up {
background: url(//b56a4b135274efeb1f5a-b4f1d8b499f2c23281383392e57b9506.r50.cf2.rackcdn.com/vote_arrow.png) no-repeat scroll -18px 0;
cursor: pointer;
height: 13px;
width: 18px;
}
.down {
  background: url(//b56a4b135274efeb1f5a-b4f1d8b499f2c23281383392e57b9506.r50.cf2.rackcdn.com/vote_arrow.png) no-repeat scroll -18px -14px;
  cursor: pointer;
  height: 13px;
  width: 18px;
}

.down.active {
    background: red;
    color: white;
}
.js-vote-container {
    width: 20px;
    margin:10px auto;
    text-align:center;
}
.up_vote {  background: url(//b56a4b135274efeb1f5a-b4f1d8b499f2c23281383392e57b9506.r50.cf2.rackcdn.com/vote_arrow.png) no-repeat scroll 0 0 }


.down_vote {  background: url(//b56a4b135274efeb1f5a-b4f1d8b499f2c23281383392e57b9506.r50.cf2.rackcdn.com/vote_arrow.png) no-repeat scroll 0 -14px }
.up:hover {  background-position: 0 0 }
.down:hover {  background-position: 0 -14px }

JavaScript

$(function() {
    var $voteBtn = $('.js-vote');

    $voteBtn.click(function() {
        var $btn = $(this);

        var $btnContainer = $btn.closest('.js-vote-container');
        var down = $btnContainer.data('down-votes');
        var up = $btnContainer.data('up-votes');
        var direction = $btn.data('direction');
        var count = $btnContainer.find('.js-vote-count');
        var id = $btnContainer.data('submission-id');

        var countVote = function(up, down) {
            up = $btnContainer.data('up-votes');
            down = $btnContainer.data('down-votes');
            var newScore = (up - down) < 0 ? 0 : (up - down);
            count.text(newScore);
        };

        var castVote = function(id, direction) {
            $.post('/vote', {
                submissionId: id,
                direction: direction
            }, function(data) {
                if (data.response === 'success') {
                    $('#js-total-down').text(data.downvotes);
                    $('#js-total-up').text(data.upvotes);
                }
            }, 'json');
        };

        if (direction === 'up') {
            if ($btn.is('.active')) {
                $btn.removeClass('active');
                $btnContainer.data('up-votes', up - 1);
            } else {
                if ($btnContainer.find('.active').length) {
                    $btnContainer.find('.active').removeClass('active');
                    $btnContainer.data('up-votes', up + 1);
                    $btnContainer.data('down-votes', down - 1);
                } else {
                    $btnContainer.data('up-votes', up + 1);
                }

                $btn.addClass('active');
            }
        } else {
            if ($btn.is('.active')) {
                $btn.removeClass('active');
                $btnContainer.data('down-votes', down - 1);
            } else {
                if ($btnContainer.find('.active').length) {
                   ...