jQuery中的星级

Question

I want a star rating system please check the JSFiddle .I want to stick the rating on mouse click.

HTML:

<div class="rating-star rating-star-off" data-value="0"></div>
<div class="rating-star rating-star-off" data-value="1"></div>
<div class="rating-star rating-star-off" data-value="2"></div>
<div class="rating-star rating-star-off" data-value="3"></div>
<div class="rating-star rating-star-off" data-value="4"></div>
</div>

CSS:

.rating-star{width:25px;height:25px;float:left;margin-right:5px;}
.rating-star-off{background:#eee url(star-off.svg) no-repeat;}
.rating-star-on{background:#000 url(star-on.svg) no-repeat;}

jQuery:

$(function(){

  $(".rating-star").click(function(e){
    $(this).prevAll().andSelf().addClass('rating-star-on');
    $(this).nextAll().removeClass('rating-star-on');
  });
  $(".rating-star").hover(function(){
    $(this).prevAll().andSelf().addClass('rating-star-on');
    $(this).nextAll().removeClass('rating-star-on');
  });
  $(".rating-star").mouseout(function(){
    $(".rating-star").removeClass('rating-star-on'); 
  });
});

http://jsfiddle.net/piyush_dezi/a67gv2o7/

Thanks in advance for your help.

Answer 1

One way is to add another class for selected to your css rules

.rating-star-on, 
.rating-star-selected
    {background:#000 url(star-on.svg) no-repeat;}

And change the click handler to add this selected class.

$(".rating-star").click(function(e){
    $(this).prevAll().andSelf().addClass('rating-star-selected');
    $(this).nextAll().removeClass('rating-star-on');
});

You will likely need to make some adjustments if you want user to be able to change their rating also

DEMO

Answer 2

First your click event add classes to highlight the stars after it mouse out event remove these classes. In mouse click event unbind mouse out event so it will not remove classes from your stars. Also instead of using anonymous mouse out function use name function so your can bind it again for other starts.

   $(function(){
$(".rating-star").mouseout(mouseOutFunction);

function mouseOutFunction(){
$(".rating-star").removeClass('rating-star-on'); 
}


$(".rating-star").click(function(e){
$(this).prevAll().andSelf().addClass('rating-star-on');
$(this).nextAll().removeClass('rating-star-on');
$(".rating-star").bind( "mouseout", mouseOutFunction);
$(this).unbind( "mouseout" );
});

$(".rating-star").mouseenter(function(){

  $(this).prevAll().andSelf().addClass('rating-star-on');
  $(this).nextAll().removeClass('rating-star-on');
});

});

Answer 3

Add this line to CSS:

.rating-star-hover {background:#000 url(star-on.svg) no-repeat;}

Update JS:

$(this).prevAll().andSelf().removeClass('rating-star-off').addClass('rating-star-on');
$(this).nextAll().removeClass('rating-star-on');
});

$(".rating-star").hover(function(){
  $(this).prevAll().andSelf().addClass('rating-star-hover');
  $(this).nextAll().removeClass('rating-star-on');
});

$(".rating-star").mouseout(function(){
    $(".rating-star").removeClass('rating-star-hover'); 
});

Answer 4

The reason why it's not getting executed is that when we click on the div, the rating-on class is added but as we mouseout the class is been removed. So the rating class is not changed. You can also do this using an boolean variable. Check this :

    `http://jsfiddle.net/bandhavya/we3mx6vt/`

Answer 5

Why you dont use jquery rating plugin ? Have many options in the web. Like raty.check this url: Rating Plugins Raty is one of the best that i used.