使用jQuery实现星级评分代码分享
前面有一篇原生js实现星级评分。可能覆盖面不是很广，现在给出一个jquery实现的星级评分。
<divclass="star"> <span>jQuery星级评论打分</span> <ul> <li><ahref="javascript:;">1</a></li> <li><ahref="javascript:;">2</a></li> <li><ahref="javascript:;">3</a></li> <li><ahref="javascript:;">4</a></li> <li><ahref="javascript:;">5</a></li> </ul> </div>
<style>
*{margin:0;padding:0;font-size:13px;}
ul,li{list-style:none;}
.star{position:relative;width:600px;height:24px;margin:20pxauto0;}
.starspan{float:left;height:19px;line-height:19px;}
.starul{margin:010px;}
.starli{float:left;width:24px;height:22px;text-indent:-9999px;background:url('star.png')no-repeat;cursor:pointer;}
.starli.on{background-position:0-28px;}
.starp{padding:10px10px0;position:absolute;top:20px;width:159px;height:60px;z-index:100;}
.starpem{color:#FF6600;display:block;font-style:normal;}
.starstrong{color:#ff6600;padding-left:10px;}
.hidden{display:none;}
</style>
<scripttype="text/javascript"src="http://s.thsi.cn/js/jquery-1.7.2.min.js"></script>
<scripttype="text/javascript"src="score.js"></script>
</head>
<body>
<scripttype="text/javascript">
$(function(){
varscore=newScore({
callback:function(cfg){
console.log(cfg.starAmount);
}
});
});
</script>
/**
*JQ评分效果
*/
functionScore(options){
this.config={
selector : '.star', //评分容器
renderCallback : null, //渲染页面后回调
callback : null //点击评分回调
};
this.cache={
aMsg:[
"很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
"不满意|部分有破损，与卖家描述的不符，不满意",
"一般|质量一般，没有卖家描述的那么好",
"满意|质量不错，与卖家描述的基本一致，还是挺满意的",
"非常满意|质量非常好，与卖家描述的完全一致，非常满意"
],
iStar :0,
iScore:0
};
this.init(options);
}
Score.prototype={
constructor:Score,
init:function(options){
this.config=$.extend(this.config,options||{});
varself=this,
_config=self.config,
_cache=self.cache;
self._renderHTML();
},
_renderHTML:function(){
varself=this,
_config=self.config;
varhtml='<spanclass="desc"></span>'+
'<pclass="star-phidden"></p>';
$(_config.selector).each(function(index,item){
$(item).append(html);
$(item).wrap($('<divclass="parentCls"style="position:relative"></div>'));
varparentCls=$(item).closest('.parentCls');
self._bindEnv(parentCls);
_config.renderCallback&&$.isFunction(_config.renderCallback)&&_config.renderCallback();
});
},
_bindEnv:function(parentCls){
varself=this,
_config=self.config,
_cache=self.cache;
$(_config.selector+'li',parentCls).each(function(index,item){
//鼠标移上
$(item).mouseover(function(e){
varoffsetLeft=$('ul',parentCls)[0].offsetLeft;
ismax(index+1);
$('p',parentCls).hasClass('hidden')&&$('p',parentCls).removeClass('hidden');
$('p',parentCls).css({'left':index*$(this).width()+12+'px'});
varhtml='<em>'+
'<b>'+index+'</b>分'+_cache.aMsg[index].split('|')[0]+''+
'</em>'+_cache.aMsg[index].split('|')[1];
$('p',parentCls).html(html);
});
//鼠标移出
$(item).mouseout(function(){
ismax();
!$('p',parentCls).hasClass('hidden')&&$('p',parentCls).addClass('hidden');
});
//鼠标点击
$(item).click(function(e){
varindex=$(_config.selector+'li',parentCls).index($(this));
_cache.iStar=index+1;
!$('p',parentCls).hasClass('hidden')&&$('p',parentCls).addClass('hidden');
varhtml='<strong>'+
index+
'分</strong>'+_cache.aMsg[index].split('|')[1];
$('.desc',parentCls).html(html);
_config.callback&&$.isFunction(_config.callback)&&_config.callback({starAmount:_cache.iStar});
});
});
functionismax(iArg){
_cache.iScore=iArg||_cache.iStar;
varlis=$(_config.selector+'li',parentCls);
for(vari=0;i<lis.length;i++){
lis[i].className=i<_cache.iScore?"on":"";
}
}
}
};
使用方法超级简单，这里就不多废话了，小伙伴们拿走自由发挥吧。