鼠標(biāo)點擊離開后才執(zhí)行函數(shù)，幫看看錯在哪里，謝謝
<!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>
<!-- 第一種實現(xiàn)方式 -->
<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>
2018-04-04
注意事件綁定的地方有錯，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)
? ? ? ?})
2018-04-04
```js
alert('aaaa')
```