摘要：
之前有一篇关于原生js的星级评定的文章。覆盖范围可能不是很广。现在我们给出jquery实现的星级。
前面有一篇原生js实现星级评分 。可能覆盖面不是很广，现在给出一个jquery实现的星级评分。
Html代码 
- <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>
Css代码
- <style>
- *{margin:0;padding:0;font-size:13px;}
- ul,li{list-style:none;}
- .star {position:relative;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;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;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>
Js代码
- <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>
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 = '<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" : "";
- }
- }
- }
- };
这个也是在网上找的一个相对自己来说更实用一点的。做储备。