star rating

by Nikhil krishnan

HTML

<div class="star-rating-widget">
    <ul class="stars">
        <li>0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>
<p class="tooltip">Roll over stars, then click to rate.</p>

CSS

.star-rating-widget {
    float: left;
    width: 162px;
    border: 1px solid #777;
    margin-right: 10px;
    padding-left: 12px;
    background-color: #FAFAFA;
}
.star-rating-widget ul {
    background: url("http://www.houzz.com/res/2177/pic/rating_24.png") no-repeat scroll 0 0 transparent;
    float: left;
    padding: 0;
    margin: 14px 0;
    height: 23px;
    width: 100%;
}
.star-rating-widget li {
    float: left;
    height: 23px;
    overflow: hidden;
    width: 27px;
    font-size:0;
}
.star-rating-widget .stars-0, .star-rating-widget .starsClk-0 {
    background-position: 0 -23px;
}
.star-rating-widget .stars-1, .star-rating-widget .starsClk-1 {
    background-position: 0 -46px;
}
.star-rating-widget .stars-2, .star-rating-widget .starsClk-2 {
    background-position: 0 -69px;
}
.star-rating-widget .stars-3, .star-rating-widget .starsClk-3 {
    background-position: 0 -92px;
}
.star-rating-widget .stars-4, .star-rating-widget .starsClk-4 {
    background-position: 0 -115px;
}

JavaScript

//star rating
var test = "";
$('.star-rating-widget ul li').click(function(){
    
    test = 'starsClk-'+$(this).index();
    var findRate = 'starsClk-'+$(this).index();
    
    $('.star-rating-widget').find('ul').removeClass('starsClk-0 starsClk-1 starsClk-2 starsClk-3 starsClk-4');
    $('.star-rating-widget').find('ul').addClass(findRate);

    $('.tooltip').text( $(this).text() );
    $('li').removeClass('rate');
    $(this).addClass('rate');
})
 

$('.star-rating-widget ul li').hover(function(){
    
    console.log(test);
    $('ul').removeClass(test);
    var findRate = 'stars-'+$(this).index();
    $('.star-rating-widget').find('ul').addClass(findRate);
    $('.tooltip').text( $(this).text() );
    
}, function(){
    var findRate = 'stars-'+$(this).index();
    $('.star-rating-widget').find('ul').removeClass(findRate);
    $('.tooltip').text( $('.rate').text() );
    
    if( ! $('li').hasClass('rate') ){
        
        $('.tooltip').text( 'Roll over stars, then click to rate.' );
    }
    
    
    $('ul').addClass(test);
});