您好,欢迎访问一九零五行业门户网

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

前面有一篇原生js实现星级评分 。可能覆盖面不是很广,现在给出一个jquery实现的星级评分。
复制代码 代码如下:
jquery星级评论打分




5
复制代码 代码如下:
复制代码 代码如下:
>http://s.thsi.cn/js/jquery-1.7.2.min.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 = '' +  
                   '
'; 
        $(_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[i].classname = i             } 
        } 
    } 
 };
使用方法超级简单,这里就不多废话了,小伙伴们拿走自由发挥吧。
其它类似信息

推荐信息