使用jQuery實現星級評分代碼分享

2019-11-20 13:46:46

字體：大中小

來源：轉載

供稿：網友

前面有一篇原生js實現星級評分 ?？赡芨采w面不是很廣，現在給出一個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>  

復制代碼代碼如下:

復制代碼代碼如下:

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