jQuery Rating

by Alvin Olavarrieta

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<div class="rating-widget">
    <a href="#" data-rating-value="1" data-rating-text="Excellent" class="rate-1"><i class="fa fa-circle"></i><span>Excellent</span></a>
	<a href="#" data-rating-value="2" data-rating-text="Very Good" class="rate-2"><i class="fa fa-circle"></i><span>Very Good</span></a>
	<a href="#" data-rating-value="3" data-rating-text="Good" class="rate-3"><i class="fa fa-circle"></i><span>Good</span></a>
	<a href="#" data-rating-value="4" data-rating-text="Fair" class="rate-4"><i class="fa fa-circle"></i><span>Fair</span></a>
	<a href="#" data-rating-value="5" data-rating-text="Poor" class="rate-5"><i class="fa fa-circle"></i><span>Poor</span></a>
</div>

CSS

.rating-widget {
}
.rating-widget a {
	width: 74px;
	height: 74px;
	font-size:12px;
	font-weight: bold;
	text-transform: uppercase;
	text-decoration:none;
	text-align: center;
	line-height: 1;
	letter-spacing: -1px;
	padding-top: 15px;
	margin-left: 10px;
	float:left;
	display:block;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
.rating-widget a:first-child {
	margin: 0;
}
.rating-widget a i {
	font-size: 24px;
	color: #FFF;
	width: 24px;
	height: 24px;
	margin: 0 auto 6px auto;
	display: block;
}
.rating-widget a[class*="rate-"]:hover,
.rating-widget a[class*="rate-"].selected {
	color: #fff;
	transition: background-color 0.5s ease;
}

.rating-widget a.rate-1 { color: rgba(26,107,133,1); background-color: rgba(26,107,133,0.2); }
.rating-widget a.rate-1:hover,
.rating-widget a.rate-1.selected { background-color: rgba(26,107,133,1); }

.rating-widget a.rate-2 { color: rgba(58,140,62,1); background-color: rgba(58,140,62,0.2); }
.rating-widget a.rate-2:hover,
.rating-widget a.rate-2.selected { background-color: rgba(58,140,62,1); }

.rating-widget a.rate-3 { color: rgba(205,184,10,1); background-color: rgba(205,184,10,0.2); }
.rating-widget a.rate-3:hover,
.rating-widget a.rate-3.selected { background-color: rgba(205,184,10,1); }

.rating-widget a.rate-4 { color: rgba(226,123,12,1); background-color: rgba(226,123,12,0.2); }
.rating-widget a.rate-4:hover,
.rating-widget a.rate-4.selected { background-color: rgba(226,123,12,1); }

.rating-widget a.rate-5 { color: rgba(173,31,24,1); background-color: rgba(173,31,24,0.2); }
.rating-widget a.rate-5:hover,
.rating-widget a.rate-5.selected { background-color: rgba(173,31,24,1); }

JavaScript

var ratingWidget = $('.rating-widget');
ratingWidget.find('i').data('default', 'fa fa-circle');

ratingWidget.on('click', 'a', function () {
    ratingWidget.find('.selected').removeClass('selected').end().find('i').removeClass('fa-check-circle').addClass('fa-circle').data('default','fa fa-circle');
    $(this).addClass('selected').find('i').data('default', 'fa fa-check-circle');
    $(this).find('i').removeClass().addClass('fa fa-check-circle');
    
});

$('.rating-widget a').hover(function () {
    $(this).find('i').removeClass().addClass('fa fa-check-circle');
}, function () {
    var class1 = $(this).find('i').data('default');
    $(this).find('i').removeClass().addClass(class1);
});