前面有一篇原生js实现星级评分 。可能覆盖面不是很广,现在给出一个jquery实现的星级评分。
复制代码 代码如下:
jquery星级评论打分
1
2
3
4
5
复制代码 代码如下:
复制代码 代码如下:
>http://s.thsi.cn/js/jquery-1.7.2.min.js>>
复制代码 代码如下:
/**
* jq评分效果
*/
function score(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 || {});
var self = this,
_config = self.config,
_cache = self.cache;
self._renderhtml();
},
_renderhtml: function(){
var self = this,
_config = self.config;
var html = '' +
'
';
$(_config.selector).each(function(index,item){
$(item).append(html);
$(item).wrap($('
'));
var parentcls = $(item).closest('.parentcls');
self._bindenv(parentcls);
_config.rendercallback && $.isfunction(_config.rendercallback) && _config.rendercallback();
});
},
_bindenv: function(parentcls){
var self = this,
_config = self.config,
_cache = self.cache;
$(_config.selector + ' li',parentcls).each(function(index,item){
// 鼠标移上
$(item).mouseover(function(e){
var offsetleft = $('ul',parentcls)[0].offsetleft;
ismax(index + 1);
$('p',parentcls).hasclass('hidden') && $('p',parentcls).removeclass('hidden');
$('p',parentcls).css({'left':index*$(this).width() + 12 + 'px'});
var html = '' +
''+index+'分 '+_cache.amsg[index].split('|')[0]+'' +
'' + _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){
var index = $(_config.selector + ' li',parentcls).index($(this));
_cache.istar = index + 1;
!$('p',parentcls).hasclass('hidden') && $('p',parentcls).addclass('hidden');
var html = '' +
index +
'分' +_cache.amsg[index].split('|')[1];
$('.desc',parentcls).html(html);
_config.callback && $.isfunction(_config.callback) && _config.callback({staramount:_cache.istar});
});
});
function ismax(iarg) {
_cache.iscore = iarg || _cache.istar;
var lis = $(_config.selector + ' li',parentcls);
for(var i = 0; i lis[i].classname = i }
}
}
};
使用方法超级简单,这里就不多废话了,小伙伴们拿走自由发挥吧。