补充全局变量问题，多评分解决，代码复用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>星际评分一</title>
<style>
body,ul,li{
padding: 0;
margin: 0;
}
li{
list-style-type:none;
/*无标题*/
}
.rating{
width:130px ;
height: 26px;
margin: 100px auto;
}
.rating-item{
float: left;
width: 26px;
height: 26px;
background:url(../img/te.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>
<ul class="rating" id ="rating2">
<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 src="../js/jquery-2.1.1.min.js"></script>
<script>
//团队开发，便于维护，避免命名空间重复，造成的是事件覆盖，可以统一用lzk_num;
//或者加入自运行函数。解决全局变量问题。加入闭包中(function(){ })();
/*加入对象 var rating =*/
var rating = (function(){
//点亮放在外面，只执行一次就好,可以放在外面，如下为linghtOn同一添加￥item参数
var lightOn =function($item,num) {
$item.each(function(index){
if(index < num)
{
$(this).css('background-position','0 -26px');
}else{
$(this).css('background-position','0 0');
}
});
};
//多评分，利用函数产地参数。
/* 3.4隐藏 * var num = 2,$rating =$('#rating'),$item = $rating.find('.rating-item');*/
/*3简历函数传递参数num,不同的列表可能需要不同的num初始值*/
//3.1简历函数传递num, el表示ul中的id
var init = function (el, num){
//3.5将3.4中内容隐藏后，在init函数内部接收 num；用el传递进来的参数。
var $rating =$(el),
$item = $rating.find('.rating-item');
//3.6将点亮和事件运行也移动到这里，并进行相应的修改。
//点亮
// 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($item,num);
//事件绑定
//修改事案绑定，子元素事件交由父元素执行
$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);
});
}
//JQuery插件
$.fn.extend({
rating:function(num){
return this.each(function(){
init(this,num);
});
}
});
//3.2 当前建立的init函数是局部独立的，如何与外部进行参数传递，可以返回init
//通过建立一个对象,这个对象具有方法：init；所以在开头家兔var rating=,成为对象。
return {
init:init //没有；
};
})()
/*3.3在这里设置init方法的参数。*/
rating.init('#rating',2);
// rating.init('#rating2',3);
$('#rating2').rating(4);
</script>
</body>
</html>
