问题已经解决，粗心造成的错误
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Star rating 1</title>
<style type="text/css">
body,ul,li{
padding: 0;
margin: 0;
}
li{
list-style-type: none;
}
.rating{
width: 165px;
height: 40px;
margin: 100px auto;
overflow: hidden;
}
.rating-item{
float:left;
width: 33px;
height: 33px;
background: url(img/star.png) no-repeat;
cursor:pointer;
}
</style>
</head>
<body>
<!--The First way-->
<ul class="rating" id="rating">
<li class="rating-item" title="很不好"></li>
<li class="rating-item" title="不好"></li>
<li class="rating-item" title="一般"></li>
<li class="rating-item" title="好"></li>
<li class="rating-item" title="很好"></li>
</ul>
<script
src="https://code.jquery.com/jquery-1.11.3.min.js"
integrity="sha256-7LkWEzqTdpEfELxcZZlS6wAx5Ff13zZ83lYO2/ujj7g="
crossorigin="anonymous"></script>
<script type="text/javascript">
var num = 2,
$item = $('#rating').find('.rating-item');
var lightOn = function(num){
$item.each(function(index){
if(index < num){
$(this).css('background-position', '0 -68px');
}else{
$(this).css('background-position','0 0');
}
});
};
lightOn(num);
$item.on('mouseover',function() {
lightOn($(this).index()+1);
}).on('click', function() {
num=$(this).index()+1;
/* Act on the event */
});
$('#rating').on('mouseout',function() {
lightOn(num);
});
</script>
</body>
</html>
