使用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 相关文章推荐
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
Nov 06 Javascript
javascript Firefox与IE 替换节点的方法
Feb 24 Javascript
jQuery select操作控制方法小结
May 26 Javascript
jQuery setTimeout()函数使用方法
Apr 07 Javascript
jQuery实现只允许输入数字和小数点的方法
Mar 02 Javascript
jquery-mobile基础属性与用法详解
Nov 23 Javascript
vue.js绑定class和style样式(6)
Dec 09 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
Apr 13 Javascript
vue2.0 axios跨域并渲染的问题解决方法
Mar 08 Javascript
手淘flexible.js框架使用和源代码讲解小结
Oct 15 Javascript
ES6知识点整理之对象解构赋值应用示例
Apr 17 Javascript
分享JS表单验证源码(带错误提示及密码等级)
Jan 05 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
php实现以只读方式打开文件的方法
2015/03/16 PHP
基于linnux+phantomjs实现生成图片格式的网页快照
2015/04/15 PHP
php中header设置常见文件类型的content-type
2015/06/23 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
PHP实现的装箱算法示例
2018/06/23 PHP
jQuery中delegate和on的用法与区别详细解析
2014/01/26 Javascript
JavaScript参数个数可变的函数举例说明
2014/10/10 Javascript
快速学习JavaScript的6个思维技巧
2015/10/13 Javascript
javascript 继承学习心得总结
2016/03/17 Javascript
javascript执行环境及作用域详解
2016/05/05 Javascript
VC调用javascript的几种方法(推荐)
2016/08/09 Javascript
用原生js统计文本行数的简单示例
2016/08/19 Javascript
微信小程序数据存储与取值详解
2018/01/30 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
2018/05/12 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
2019/08/26 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
2019/09/21 jQuery
countUp.js实现数字动态变化效果
2019/10/17 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
JavaScript实现点击自制菜单效果
2021/02/02 Javascript
Python实现的矩阵类实例
2017/08/22 Python
Python基于socket实现简单的即时通讯功能示例
2018/01/16 Python
tensorflow: variable的值与variable.read_value()的值区别详解
2018/07/30 Python
python为Django项目上的每个应用程序创建不同的自定义404页面(最佳答案)
2020/03/09 Python
Django Admin后台模型列表页面如何添加自定义操作按钮
2020/11/11 Python
Kenneth Cole官网:纽约时尚优雅品牌
2016/11/14 全球购物
澳大利亚先进的皮肤和激光诊所购物网站:Soho Skincare
2018/10/15 全球购物
亿阳信通股份有限公司C#笔试题
2016/12/06 面试题
土木工程毕业生自荐信
2013/11/12 职场文书
中国梦演讲稿5分钟
2014/08/19 职场文书
幼儿园小班教师个人工作总结
2015/02/06 职场文书
药品开票员岗位职责
2015/04/15 职场文书
培训通知
2015/04/17 职场文书
小兵张嘎观后感
2015/06/03 职场文书
幸福终点站观后感
2015/06/04 职场文书
Nginx源码编译安装过程记录
2021/11/17 Servers
openEuler 搭建java开发环境的详细过程
2022/06/10 Servers