进行设计半颗星星评分，出现一个错误："Uncaught ReferenceError: e is not defined" /123/rating/index3.html (142) if(e.pageX - $this.offset().left < $this.width()/2){//半颗，原因是没有定义变量e.,修改后完成，鼠标刷过星星显示半颗星星。
期间利用了代码复用，图片的位移，
<!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="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>
var rating = (function(){
//点亮整颗
var LightEntire = function(el,options){
this.$el = $(el);
this.$item = this.$el.find('.rating-item');
this.opts = options
}
//点亮的初始化方法。点亮星星，以及相关的事件。
LightEntire.prototype.init = function () {
this.lightOn(this.opts.num);
if(!this.opts.readOnly){
this.bindEvent();
}
};
LightEntire.prototype.lightOn= function (num){
num = parseInt(num);//点亮几颗星星。保证是整数
this.$item.each( function(index)
{
if(index < num)
{
$(this).css('background-position','0 -26px');
}else{
$(this).css('background-position','0 0');
}
} );
};
LightEntire.prototype.bindEvent = function (){
var self = this,//定义一个对象
itemLength = self.$item.length;
self.$el.on('mouseover','.rating-item',function()
{
var num =$(this).index() + 1;
self.lightOn(num);
(typeof self.opts.select == 'function() ')&& self.opts.select.call(this,num,itemLength)
self.$el.trigger('select',[num,itemLength]);
}).on('click','.rating-item',function(){
self.opts.num = $(this).index() + 1;
(typeof self.opts.chosen == 'function() ')&& self.opts.chosen.call(this,self.opts.num,itemLength)
self.$el.trigger('chosen',[self.opts.num,itemLength]);
}).on('mouseout',function(){
self.lightOn(self.opts.num);
});
};
//点亮半颗
var LightHalf = function(el,options){
this.$el = $(el);
this.$item = this.$el.find('.rating-item');
this.opts = options;
this.add = 1;
}
//点亮的初始化方法。点亮星星，以及相关的事件。
LightHalf.prototype.init = function () {
this.lightOn(this.opts.num);
if(!this.opts.readOnly){
this.bindEvent();
}
};
LightHalf.prototype.lightOn= function (num){
var count = parseInt(num),
isHalf = count !== num; //判断输入的数经过取整后是否还是原来的数。
this.$item.each( function(index)
{
if(index < count)
{
$(this).css('background-position','0 -26px');
}else{
$(this).css('background-position','0 0');
}
} );
if(isHalf){
this.$item.eq(count).css('background-position','0 -52px')
}
};
LightHalf.prototype.bindEvent = function (){
var self = this,//定义一个对象
itemLength = self.$item.length;
self.$el.on('mousemove','.rating-item',function(e)
{
var $this = $(this),
num = 0;
if(e.pageX - $this.offset().left < $this.width()/2){//半颗
self.add =0.5;
}else{
self.add =1;
}
num = $this.index() + self.add ;
self.lightOn(num);
(typeof self.opts.select == 'function() ')&& self.opts.select.call(this,num,itemLength)
self.$el.trigger('select',[num,itemLength]);
}).on('click','.rating-item',function(){
self.opts.num = $(this).index() + self.add;
(typeof self.opts.chosen == 'function() ')&& self.opts.chosen.call(this,self.opts.num,itemLength)
self.$el.trigger('chosen',[self.opts.num,itemLength]);
}).on('mouseout',function(){
self.lightOn(self.opts.num);
});
};
//半
//默认参数,默认点亮星星个数，是否只读,select:执行的方法，chosen:点击星星时的动作
var defaults = {
num:0,
readOnly:false,
select:function(){},
chosen:function(){}
};
//初始化
var init =function(el,options){
options = $.extend({},defaults, options);//将options中内容覆盖到defaults中，将defaults中内容生成到{}中，最后再反馈到options中。
// new LightEntire(el,options).init();
new LightHalf(el,options).init();
};
return {
init:init
};
})();
rating.init('#rating',{
num:2.5,
// select : function(mum,total){
// Console.log(this);
// console.log(num +'/'+ total);
// }
});
$('#rating').on('select',function(el,num,total){
console.log(num +'/'+ total);//输出星星的位置个数
}).on('chosen',function(e,num,total){
console.log(num +'/'+ total);
});
</script>
</body>
</html>