SO jQuery 1.5.1 Fiddle

Test Fiddle mainly for SO Questions jQuery 1.5.1, UI 1.9

by Nick Craver

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css">
<div class="image_box">
    <div class="image">...</div>
    <div class="image_info">
        <div class="thumb_like" data-id="1"></div>
        <div class="thumb_count">10</div> likes | 0 comments
    </div>
</div>

<div class="image_box">
    <div class="image">...</div>
    <div class="image_info">
        <div class="thumb_unlike" data-id="2"></div>
        <div class="thumb_count">55</div> likes | 0 comments
    </div>
</div>

CSS

.thumb_like, .thumb_unlike {
    color: white;
    border-radius: 4px;
    width: 100px;
    height: 20px;
    text-align: center;    
}
.thumb_like {
    background: #00AA00;
}
.thumb_unlike {
    background: #AA0000;
}

JavaScript

$(function() {
        $('body').on('click', '.thumb_like, .thumb_unlike', function() {
            var image_id = $(this).attr('data-id'),
                isLike = $(this).hasClass('thumb_like');
            $(this).toggleClass('thumb_like thumb_unlike')
                   .next('.thumb_count')
                   .text(function(_, i) { return +i + (isLike ? 1 : -1); });
            /*$.post('..url..', { 
                id: image_id,
                action: isLike ? 'like' : 'unlike'
            });*/
        });
    });