为什么我的鼠标经过事件,打印出多个

来源:4-5 点亮整颗星星

西小勺

2017-07-16 19:18

http://img.mukewang.com/596b4b490001e6a111660368.jpg

<script type="text/javascript">

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 -40px')

}else{

$(this).css('background-position','1px 0')

}

});

};

lightEntire.prototype.bindEvent = function(){

var self = this;

var itemLength = self.$item.length;

//事件绑定

self.$el.on('mousemove','.rating-item',function(){

var num = $(this).index() + 1;

self.lightOn(num);

//短路写法,只有&&前面的成立,才能执行后面的代码

(typeof self.opts.selected === 'function') && self.opts.selected.call(this,num,itemLength);

//在父容器上触发一个事件

self.$el.trigger('selected',[num,itemLength]);

}).on('click','.rating-item',function(){

self.opts.num = $(this).index() + 1 ;

//短路写法,只有&&前面的成立,才能执行后面的代码

(typeof self.opts.chosen === 'function') && self.opts.selected.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,//是否只读

selected:function(){},

chosen:function(){}

}

//初始化

var init = function(el,options){

options = $.extend({},defaults,options);//用户传递参数时,使用传递参数,options的内容覆盖defalts。生成的内容存在空对象里。

new lightEntire(el,options).init();

}

return {

init:init

}

})();

rating.init('#rating',{

num:2,

// selected:function(num,total){

// console.log(num+'/'+ total)

// },

})

$('#rating').on('selected',function(e,num,total){

console.log(num+'/'+ total)

}).on('chosen',function(e,num,total){

console.log(num+'/'+ total)

})

</script>


写回答 关注

2回答

  • Zz皓
    2018-05-30 18:02:06

    西小勺说得对

  • 西小勺
    2017-07-16 19:28:51

    mouseover打成了mousemove

星级评分原理和实现(上)

本课程主要讲解如何使用不同的方式来实现星级评分的效果.

25809 学习 · 109 问题

查看课程

相似问题