使用jQuery实现星级评分代码分享

jQuery 2018-12-30

前面有一篇 。可能覆盖面不是很广，现在给出一个jquery实现的星级评分。

代码如下:
jQuery星级评论打分

代码如下:
*{margin:0;padding:0;font-size:13px;} ul,li{list-style:none;} .star {position:relative;width:600px;height:24px; margin:20px auto 0;} .star span {float:left;height:19px;line-height:19px;} .star ul{margin:0 10px;} .star li{float:left;width:24px;height:22px;text-indent:-9999px;background:url('star.png') no-repeat;cursor:pointer;} .star li.on{background-position:0 -28px;} .star p {padding:10px 10px 0;position:absolute;top:20px;width:159px;height:60px;z-index:100;} .star p em {color: #FF6600;display: block;font-style: normal;} .star h3 {color:#ff6600;padding-left:10px;} .hidden{display:none;}

代码如下:
>

<div class="codetitle"><a style="CURSOR: pointer" data="47512" class="copybut" id="copybut47512" onclick="doCopy('code47512')"> 代码如下:

<div class="codebody" id="code47512">
/**

  • 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 = '<span class="desc">' +
'<p class="star-p hidden">

';
$(_config.selector).each(function(index,item){
$(item).append(html);
$(item).wrap($('<div class="parentCls" style="position:relative">
'));
var parentCls = $(item).closest('.parentCls');
self._bindEnv(parentCls);
_config.renderCallback && $.isFunction(_config.renderCallback) && _config.renderCallback();
});

},
_bindEnv: function(parentCls){
var self = this,
_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).addClass('hidden');
});

// 鼠标点击
$(item).click(function(e){
var index = $(_config.selector + ' li',parentCls).index($(this));
_cache.iStar = index + 1;

!$('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.length; i++) {
lis[i].className = i < _cache.iScore ? "on" : "";
}
}
}
};

使用方法超级简单，这里就不多废话了，小伙伴们拿走自由发挥吧。

jQuery星星打分星级评分

相关文章

jq配合后端解决跨域
1.第一步 设置响应头 header(&#39;Access-Control-Allow...
$.inArray()方法介绍
$.inArray()方法介绍 $.inArray()函数用于在数组中搜索指定的...
jquery.serializejson.min.js的妙用
jquery.serializejson.min.js的妙用 关于这个jquery.seriali...
JS 将form表单数据快速转化为object对象（json对象）
JS 将form表单数据快速转化为object对象（json对象） jaymou...
jQuery的区别：$().click()和$(document).on('click','要选择的元素',function(){})的不同
jQuery的区别：$().click()和$(document).on(&#39;click...
jQuery插件之jquery.spinner数字智能增减插件
jQuery插件之jquery.spinner数字智能增减插件 参考地址:http...