                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /星級評分原理和實現(xiàn)（上）

為什么星星不變化

<!DOCTYPE html>
<html>
<head>
?? ?<meta charset="utf-8">
?? ?<title>星級評分第一種實現(xiàn)方式</title>
<style>
?? ?
?? ?body,ul,li{
?? ??? ?padding:0;
?? ??? ?margin:0;
?? ?}
?? ?li{
?? ??? ?list-style: none;
?? ?}

?? ?.rating{
?? ??? ?width:175px;
?? ??? ?height:35px;
?? ??? ?margin:100px auto;
?? ?}

?? ?.rating-item{
?? ??? ?float:left;
?? ??? ?width:35px;
?? ??? ?height:35px;
?? ??? ?background: url(dark.png)no-repeat;
?? ??? ?cursor: pointer;
?? ?}

</style>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
?? ?<ul class= "rating" id = "rating">
?? ??? ?<li class="rating-item" title="1"></li>
?? ??? ?<li class="rating-item" title="2"></li>
?? ??? ?<li class="rating-item" title="3"></li>
?? ??? ?<li class="rating-item" title="4"></li>
?? ??? ?<li class="rating-item" title="5"></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-possion','0 -40px');
?? ??? ??? ?}else{
?? ??? ??? ??? ?$(this).css('background-possion','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>