利用一個星級評分的小案例，來逐步封裝js星級評分插件。
從最基礎的js知識，通過一個小的demo，逐步學習js的面向對象知識。
從淺到深，逐步遞進。
圖片素材
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>星級評分--第一種實現方式</title>
</head>
<style type="text/css">
body,ul,li{
margin: 0;
padding: 0;
}
li{
list-style-type: none;
}
.rating{
width: 162px;
height: 32px;
margin: 100px auto;
}
.rating-item{
float: left;
width: 32px;
height: 32px;
background: url('./img/rating.png') no-repeat;
cursor: pointer;
}
</style>
<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>
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script type="text/javascript">
var num = 2,
$rating = $('#rating'),
$item = $rating.find('.rating-item');
//點亮星星
var lightOn = function(num){
$item.each(function(){
if($(this).index() < num){
$(this).css('background-position','0 -32px');
}else{
$(this).css('background-position','0 0');
}
});
}
//初始化,點亮num個星星
lightOn(num);
$item.on('mouseover',function(){//鼠標移入時,觸發相應操作
lightOn($(this).index() + 1);
}).on('click',function(){//鼠標點擊時,觸發相應操作
num = $(this).index() + 1;
});
//鼠標移出是,觸發相應的操作
$rating.on('mouseout',function(){
lightOn(num);
});
</script>
</html>