Skip to content

Instantly share code, notes, and snippets.

@fdcore
Created December 22, 2015 23:48
Show Gist options
  • Save fdcore/60ddaf4006990a897d34 to your computer and use it in GitHub Desktop.
Save fdcore/60ddaf4006990a897d34 to your computer and use it in GitHub Desktop.
Работа с звёздочками рейтинга, для FontAwsome, по клику присваивает полю значение.
/*
By dmitriy@nyashk.in
<input type="hidden" name="rate" id="star_rate" value="0">
<div class="stars empty" data-id="rate">
<ul>
<li><i class="fa fa-star-o"></i></li>
<li><i class="fa fa-star-o"></i></li>
<li><i class="fa fa-star-o"></i></li>
<li><i class="fa fa-star-o"></i></li>
<li><i class="fa fa-star-o"></i></li>
</ul>
</div>
*/
function bind_rating($selector, $value_selector){
var half_star = $($selector).eq(0).width() / 2;
$($selector).on('mousemove', function(e){
if($(this).closest('div').hasClass('empty') == false) return false;
if(e.offsetX < half_star){
$(this).find('i').removeClass('fa-star').addClass('fa-star-half');
} else {
$(this).find('i').removeClass('fa-star-half').addClass('fa-star').removeClass('fa-star-o');
}
$(this).parent().find('li:lt('+$(this).index()+') i').addClass('fa-star').removeClass('fa-star-half').removeClass('fa-star-o');
if($(this).index() < 4) $(this).parent().find('li:gt('+$(this).index()+') i').removeClass('fa-star').removeClass('fa-star-half').addClass('fa-star-o');
});
$('.reviews-form .stars.empty').mouseout(function(e){
if($(this).hasClass('empty'))
$(this).find('li i').removeClass('fa-star').removeClass('fa-star-half').addClass('fa-star-o');
})
$($selector).on('click', function(e){
if(e.offsetX < half_star){
var index = $(this).index() + 0.5;
$(this).find('i').removeClass('fa-star').addClass('fa-star-half');
} else {
var index = $(this).index() + 1;
$(this).find('i').removeClass('fa-star-half').addClass('fa-star').removeClass('fa-star-o');
}
$(this).parent()
.find('li:lt('+$(this).index()+') i')
.addClass('fa-star')
.removeClass('fa-star-half')
.removeClass('fa-star-o');
if($(this).index() < 4)
$(this).parent()
.find('li:gt('+$(this).index()+') i')
.removeClass('fa-star')
.removeClass('fa-star-half')
.addClass('fa-star-o');
var rating_id = $(this).closest('div').removeClass('empty').data('id');
$(this).parent().find('li').off('mousemove');
$($value_selector+rating_id).val(index);
});
}
bind_rating('.reviews-form .stars.empty li', '#star_');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment