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

Posted on 04/21/2020 | by liu

web前端|js教程使用jQuery实现星级评分代码分享【jquery】

jQuery,星级评分,星星打分

web前端-js教程

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

全景php源码,vscode自动去除行尾空格,ubuntu鼠标跟不上,tomcat目录下lib,爬虫分享库,php rowcount,黄冈百度seo服务,网站投票系统 js,中介租房网站模板lzw

消费返利系统源码,远程关机 ubuntu,tomcat无法编译文件,python爬虫感受,字符php,乐亭服务好的seo优化收费标准lzw
jQuery星级评论打分  jsp程序源码,vscode中缺少git,ubuntu安装mkfs,时时读取tomcat日志,pythont爬虫,php删除关联数组,通讯产品seo优化培训,asp网站查询excel,商城后台管理模板实例lzw
1  
2  
3  
4  
5


*{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.jpg') 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 strong {color:#ff6600;padding-left:10px;}  
.hidden{display:none;}

<script type="text/javascript" src="http://s.thsi.cn/js/jquery-1.7.2.min.js">  
  
  
  
  
$(function(){  
var score = new Score({  
callback: function(cfg) {  
console.log(cfg.starAmount);  
}  
});  
});

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

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

星星打分星级评分

jQuery+PHP实现购物商城常用的星级评分效果

jQuery+PHP实现购物商城常用的星级评分效果 | jQuery+PHP实现购物商城常用的星级评分效果 ...

JavaScript制作淘宝星级评分效果的思路【javascript】

JavaScript制作淘宝星级评分效果的思路【javascript】 | JavaScript制作淘宝星级评分效果的思路【javascript】 ...

js实现星星打分效果办法【javascript】

js实现星星打分效果办法【javascript】 | js实现星星打分效果办法【javascript】 ...