星级评分原理和实现（上）_技术笔记

林念志祥 2018-11-13
<!DOCTYPE html>
<html leng="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <title>星级评分--第二种方式</title>
    <style>
        body,ul,li{
            padding: 0;
            margin: 0;
        }
        li{
            list-style-type: none;
        }
        .rating{
            width:150px;
            height: 27px;
            margin:100px auto;
        }
        .rating-item{
            float:left;
            width:30px;
            height: 27px;
            background:url(img/start1.PNG) no-repeat;
            cursor:pointer;
        }
    </style>
</head>
<body>
<ul class="rating" id="rating">
    <li class="rating-item" title="很不好"></li>
    <li class="rating-item" title="不好"></li>
    <li class="rating-item" title="一般"></li>
    <li class="rating-item" title="好"></li>
    <li class="rating-item" title="很好"></li>
</ul>
<ul class="rating" id="rating2" style="margin-top: 30px;">
    <li class="rating-item" title="很不好2"></li>
    <li class="rating-item" title="不好2"></li>
    <li class="rating-item" title="一般2"></li>
    <li class="rating-item" title="好2"></li>
    <li class="rating-item" title="很好2"></li>
</ul>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>
    var rating=(function(){
//点亮整颗
        var LightEntire=function(el,options){
            this.$el = $(el);
            this.$item = this.$el.find('.rating-item');
            this.opts = options
        }
        LightEntire.prototype.init=function(){
            this.lightOn(this.opts.num);
            if(!this.opts.readOnly){
                this.bindEvent();
            }

        }
        LightEntire.prototype.lightOn=function(num){
            num=parseInt(num)
            this.$item.each(function (index) {
                if (index < num) {
                    $(this).css('background-position', '0 -45px');
                } else {
                    $(this).css('background-position', '0 -15px');
                }
            })
        }
            LightEntire.prototype.bindEvent=function(){
                var self=this;
                itemLength=self.$item.length;
                self.$el.on('mouseover', '.rating-item', function () {
                    var num=$(this).index() + 1
                    self.lightOn(num);
                    (typeof self.opts.select==='function') &&self.opts.select.call(this,num,itemLength);
                    //触发select事件
                    self.$el.trigger('select',[num,itemLength])
                }).on('click', '.rating-item', function () {
                    self.opts.num = $(this).index() + 1;
                    (typeof self.opts.chosen==='function') &&self.opts.chosen.call(this,self.opts.num,itemLength);
                    self.$el.trigger('chosen',[self.opts.num,itemLength])
                }).on('mouseout',function(){
                    self.lightOn(self.opts.num)
                })
            };
//默认参数
            var defaults={
                num:0,
                readOnly:false,
                selsect:function(){},
                chosen:function(){}
            };
//初始化
            var init = function(el,options){
                options=$.extend({},defaults,options);
                new LightEntire(el,options).init()
            }
        return {
            //返回一个对象(对象是一个方法)
            init:init
        }

    })()

        rating.init('#rating',{
        num:2,
       /* select:function(num,total){
            console.log(this)
          console.log(num+'/'+total)
         }*/
    });
    $('#rating').on('select',function(e,num,total){
        console.log(num+'/'+total);
    }).on('chosen',function(e,num,total){
        console.log(num+'/'+total);
    })

</script>
</head>
</body>
</html>
0赞 · 0采集
数据加载中...