                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /星級評分原理和實現（上）

代碼一樣，星星無變化

代碼檢查了幾遍，星星還是沒反應

<!DOCTYPE?html>
<html>
????<head>
????<title>星級評分--第一種實現方式</title>
????<meta?charset="utf-8"?/>
????<style>
????????*{margin:0;padding:0;}
????????ul?li{list-style:none;}
????????.rating{width:130px;height:26px;margin:100px?auto;}
????????.rating-item{float:left;width:26px;height:26px;background:url(rating.png)?no-repeat;cursor:pointer;}
????</style>
</head>
<body>
<!--?第一種實現方式?-->
????<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>
????????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?-26px');
???????????????????}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>