Javascript Jquery中的星级

我想要一个星级评分系统，请检查JSFIDLE。我想把评分贴在鼠标上

HTML:

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'); 
  });
});

---

提前感谢您的帮助。

一种方法是为选定的

添加另一个类到css规则中

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

并更改单击处理程序以添加此选定类

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

如果您希望用户也能够更改其评级，则可能需要进行一些调整

首先单击事件“添加类”以高亮显示星星，然后单击鼠标退出事件“删除这些类”。在鼠标点击事件中解除鼠标移出事件的绑定，这样它就不会从你的星星上移除类。另外，不要使用匿名鼠标移出函数，而是使用name函数，这样您就可以在其他启动时再次绑定它

   $(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');
});

});

将此行添加到CSS：

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

更新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'); 
});

它没有被执行的原因是，当我们单击div时，类的评级被添加，但当我们鼠标移出时，类被删除。所以评级等级没有改变。
您也可以使用布尔变量来实现这一点。
选中此项：

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

为什么不使用jquery评级插件？在网上有很多选择。如raty。请检查此url：
Raty是我使用过的最好的工具之一。
问题是什么？添加简单的if-else语句，单击鼠标，将其删除，这样的顺序完全没有意义。重要的是事件发生的顺序，而不是您分配给它们的顺序。我发现这里真正的问题是第一个函数在此代码中不起作用。他在这里有点击功能，但不起作用。我在最后移动了这个函数，现在悬停函数不工作了。好的。。我明白为什么。。。当只给出一个函数参数时，
悬停
单个回调将为
输入
和
离开
触发。因此，您的订单正在修复它，但只是因为OP选择了错误的事件。实际上发生了2次鼠标出的类更改。感谢Charlie，如果我找到了真正的问题并解决了它。我现在正在编辑答案。非常感谢charlietfl的建议，现在可以开始了。
$(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'); 
});

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