<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<style type="text/css">
*{margin: 0; padding: 0; list-style: none;}
.pingf{overflow: hidden; height: 50px;}
.pingf ul li{float: left; width: 20px; height: 20px; background: #ccc; margin: 5px;}
</style>
<div id="pingf" class="pingf">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="pingf2" class="pingf">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script type="text/javascript">
var rating = (function(){
function lightOn($light,num){
$light.each(function(index){
if (index < num) {
$(this).css('background','red')
} else{
$(this).css('background','#ccc')
}
});
}
var init = function(el,num){
var fu = $(el);
var $light = fu.find('li')
lightOn($light,num);
fu.on('mouseover','li',function(){
lightOn($light,$(this).index()+1);
}).on('click','li',function(){
num = $(this).index()+1;
}).on('mouseout','li',function(){
lightOn($light,num);
})
}
return{
init:init
};
})();
rating.init('#pingf',2)
rating.init('#pingf2',3)
</script>
</body>
</html>
