Use jQuery to achieve star rating code sharing

2020-03-30 04:33:17
OfStack

There was a previous post (link: #). Maybe the coverage is not very wide, now give a jquery implementation of the star rating.



<div class="star">  

<span>jQuery Star rating </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 Effect of grading  

 */  

 function Score(options) {  

    this.config = {  

        selector                  :   '.star',     //Marking vessel & NBSP; < br / >
        renderCallback            :   null,        //Callback after rendering page & NBSP; < br / >
        callback                  :   null         //Click the rating callback & NBSP;                                                   < br / >
    };  

  

    this.cache = {  

        aMsg : [  

                " Is not satisfied | The difference is too wide of the mark, and the seller's description is seriously inconsistent, very dissatisfied ",  

                " Not satisfied with | Some parts are broken, which is not consistent with the seller's description ",  

                " general | The quality is average, not as good as described by the seller ",  

                " Satisfied with the | The quality is good, and the seller's description is basically consistent, or quite satisfied ",  

                " Very satisfied with | The quality is very good, as described by the seller, very satisfied "  

                ],  

        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){  

              

            //Mouse up & NBSP; < br / >
            $(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> points  '+_cache.aMsg[index].split('|')[0]+'' +   

                           '</em>' + _cache.aMsg[index].split('|')[1];  

                $('p',parentCls).html(html);  

            });  

  

            //Mouse out & NBSP; < br / >
            $(item).mouseout(function(){  

                ismax();  

                !$('p',parentCls).hasClass('hidden') && $('p',parentCls).addClass('hidden');  

            });  

              

            //Mouse click & NBSP; < br / >
            $(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 +  

                           ' points </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" : "";  

            }  

        }  

    }  

 };

Use method super simple, here is not much nonsense, partners take away free play it.