Question

我想要一个星级评分系统请检查JSFiddle。我想在鼠标点击时坚持评级。

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/

提前感谢您的帮助。

Answer 1

一种方法是将selected的另一个类添加到您的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');
});

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

的 DEMO

Answer 2

首先，您的点击事件添加类以在鼠标移出事件后突出显示星星删除这些类。在鼠标单击事件中取消绑定鼠标输出事件，因此它不会从您的星星中删除类。另外，不使用匿名鼠标输出功能，而是使用名称功能，这样您就可以再次绑定它以进行其他启动。

isPost()

Answer 3

将此行添加到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'); 
});

Answer 4

它没有被执行的原因是，当我们点击div时，会添加rating-on类，但是当我们将鼠标移除时，类已被删除。所以评级等级没有改变。您也可以使用布尔变量执行此操作。检查一下：

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

Answer 5

为什么你不使用jquery评级插件？在网络上有很多选择。像raty.check这个网址：Rating Plugins Raty是我用过的最好的之一。

Jquery的星级评分

5 个答案: