<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title></title>
<style type="text/css">
body,ul,li{
padding: 0;
margin: 0;
}
li{
list-style-type: none;
}
.rating{
width: 550px;
height: 115px;
margin: 100px auto;
}
.rating-item{
float: left;
width: 109px;
height: 115px;
background: url(img/click.png) no-repeat;
cursor: pointer;
}
</style>
</head>
<body>
<!-- 第一种实现方式 -->
<ul id="rating" class="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 type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
var num=2,
$rating = $('#rating'),
$item = $rating.find('.rating-item');
//点亮
var lightOn =function(num){
$item.each(function(index){
if(index < num) {
$(this).css('background-position','0 -115px');
}else{
$(this).css('background-position','0 0');
}
});
};
//初始化
lightOn(num);
//事件绑定
$item.on('mouseover',function(){
lightOn($(this),index() + 1);
}).on('click',function(){
num = $(this).index() + 1;
});
$rating.on('mouseout',function(){
lightOn(num);
});
</script>
</body>
</html>
注意事件绑定的地方有错，mouseover, click 事件都需要委托给子元素 .rating-item
$rating.on('mouseover', '.rating-item', function () {
lightOn($item, $(this).index() + 1)
}).on('click', '.rating-item', function () {
num = $(this).index() + 1
}).on('mouseout', function () {
lightOn($item, num)
})
```js
alert('aaaa')
```