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

前端技术 2023/09/09 JavaScript

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

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\" : \"\"; 
            } 
        } 
    } 
 }; 

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

本文地址：https://www.stayed.cn/item/25282

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案