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


Posted in Javascript onDecember 09, 2014

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

<div class="star">  

<span>jQuery星级评论打分</span>  

<ul>  

<li><a href="javascript:;">1</a></li>  

<li><a href="javascript:;">2</a></li>  

<li><a href="javascript:;">3</a></li>  

<li><a href="javascript:;">4</a></li>  

<li><a href="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: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 strong {color:#ff6600;padding-left:10px;}  

.hidden{display:none;}  

</style> 
<script type="text/javascript" src="http://s.thsi.cn/js/jquery-1.7.2.min.js"></script>  

<script type="text/javascript" src="score.js"></script>  

</head>  

  

<body>  

<script type="text/javascript">  

$(function(){  

var score = new Score({  

callback: function(cfg) {  

console.log(cfg.starAmount);  

}  

});  

});  

</script> 

 
/** 

 * 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"></span>' +   

                   '<p class="star-p hidden"></p>';  

        $(_config.selector).each(function(index,item){  

            $(item).append(html);  

            $(item).wrap($('<div class="parentCls" style="position:relative"></div>'));  

            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 = '<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){  

                var index = $(_config.selector + ' li',parentCls).index($(this));  

                _cache.iStar = index + 1;  

                                  

                !$('p',parentCls).hasClass('hidden') && $('p',parentCls).addClass('hidden');  

                var html = '<strong>' +  

                                index +  

                           '分</strong>' +_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" : "";  

            }  

        }  

    }  

 }; 

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

Javascript 相关文章推荐
JS 控制非法字符的输入代码
Dec 04 Javascript
firefox firebug中文入门教程 脚本之家新年特别版
Jan 02 Javascript
JavaScript 空位补零实现代码
Feb 26 Javascript
Javascript this 关键字 详解
Oct 22 Javascript
本人自用的global.js库源码分享
Feb 28 Javascript
AngularJS的内置过滤器详解
May 14 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
Jun 17 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
Jun 28 Javascript
微信小程序中吸底按钮适配iPhone X方案
Nov 29 Javascript
150行代码带你实现微信小程序中的数据侦听
May 17 Javascript
深入了解JavaScript词法作用域
Jul 29 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
Oct 27 Javascript
Jquery弹出层插件ThickBox的使用方法
Dec 09 #Javascript
浅谈JavaScript函数节流
Dec 09 #Javascript
node.js中的console.log方法使用说明
Dec 09 #Javascript
node.js中的console.warn方法使用说明
Dec 09 #Javascript
node.js中的console.info方法使用说明
Dec 09 #Javascript
浅谈JavaScript实现面向对象中的类
Dec 09 #Javascript
node.js中的console.trace方法使用说明
Dec 09 #Javascript
You might like
盘点被央视点名过的日本动画电影 一部比一部强
2020/03/08 日漫
网站当前的在线人数
2006/10/09 PHP
PHPMailer安装方法及简单实例
2008/11/25 PHP
php 抽象类的简单应用
2011/09/06 PHP
PHP仿盗链代码
2012/06/03 PHP
解读PHP中上传文件的处理问题
2016/05/29 PHP
浅谈laravel orm 中的一对多关系 hasMany
2019/10/21 PHP
在网页中控制wmplayer播放器
2006/07/01 Javascript
jQuery源码分析-04 选择器-Sizzle-工作原理分析
2011/11/14 Javascript
深入理解MVC中的时间js格式化
2016/05/19 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
2016/09/24 Javascript
vue.js组件之间传递数据的方法
2017/07/10 Javascript
原生JS实现列表子元素顺序反转的方法分析
2018/07/02 Javascript
vue实现自定义日期组件功能的实例代码
2018/11/06 Javascript
解决vue打包后vendor.js文件过大问题
2019/07/03 Javascript
对layui中table组件工具栏的使用详解
2019/09/19 Javascript
vue框架中props的typescript用法详解
2020/02/17 Javascript
VSCode搭建Vue项目的方法
2020/04/30 Javascript
Vue3 响应式侦听与计算的实现
2020/11/11 Javascript
详解Python中类的定义与使用
2017/04/11 Python
Python编程之黑板上排列组合,你舍得解开吗
2017/10/30 Python
python日期相关操作实例小结
2019/06/24 Python
python使用openCV遍历文件夹里所有视频文件并保存成图片
2020/01/14 Python
tensorflow转换ckpt为savermodel模型的实现
2020/05/25 Python
Myprotein意大利官网:欧洲第一运动营养品牌
2018/11/22 全球购物
SAZAC的动物连体衣和动物睡衣:Kigurumi Shop
2020/03/14 全球购物
委托与事件是什么关系?为什么要使用委托
2014/04/18 面试题
研修第一天随笔感言
2014/02/15 职场文书
学习焦裕禄同志为人民服务思想汇报
2014/09/10 职场文书
党员应该树立反腐倡廉的坚定意识思想汇报
2014/09/12 职场文书
初三英语教学计划
2015/01/23 职场文书
结婚主持人致辞
2015/07/28 职场文书
开学第一天的感想
2015/08/10 职场文书
pytorch查看网络参数显存占用量等操作
2021/05/12 Python
JS中如何优雅的使用async await详解
2021/10/05 Javascript
一级电子管军用接收机测评
2022/04/05 无线电