Vote up/down

Gnarf's version

by someprimetime

HTML

<div class="vote-container" data-real-score="-3">
  <button class="vote up">Up</button>
  <span class="count">0</span>
  <button class="vote down active">Down</button>
</div>
<div class="vote-container">
  <button class="vote up active">Up</button>
  <span class="count">30</span>
  <button class="vote down">Down</button>
</div>
<div class="vote-container">
  <button class="vote up">Up</button>
  <span class="count">0</span>
  <button class="vote down active">Down</button>
</div>
<div class="vote-container">
  <button class="vote up">Up</button>
  <span class="count">11</span>
  <button class="vote down">Down</button>
</div>

CSS

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

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

.down.active {
    background: red;
    color: white;
}
.vote-container {
    width: 20px;
    margin:10px auto;
    text-align:center;
}

JavaScript

$(function() {
    $(".vote-container").each(function() {
        var container = $(this),
            buttons = container.find(".vote"),
            count = container.find(".count"),
            score = parseFloat(count.text());
        var realScore = container.data('real-score');

        buttons.click(function(event) {
            var clicked = $(this),
                value = clicked.is(".up") ? 1 : -1;

            if (clicked.is(".active")) {
                if (clicked.is('.down') && realScore <= 0) {
                    clicked.toggleClass('active');
                    score = 0;
                    container.data('real-score', realScore);
                    alert(container.data('real-score'));
                } else {
                    score -= value;
                    clicked.toggleClass("active");
                }

            } else {
                if (buttons.not(clicked).is(".active")) {
                    score += value;
                    buttons.removeClass("active");
                }
                if (clicked.is(".down") && realScore <= 0) {
                    clicked.toggleClass('active');
                    score = 0;
                    container.data('real-score', realScore - 1);
                    alert(container.data('real-score'));
                } else {
                    score += value;
                    clicked.toggleClass("active");
                }
            }
            count.text(score);
        });
    });
});