var rating = (function(){ 'use strict'; function init(el, num) { var $items = $(el).find('.rating-item'); $items.each(function(i, item) { if ($(this).index() <= num) { console.log('小于num') $(this).css('background-position', '2px -28px'); } else { $(this).css('background-position', '2px 0'); } }); } function events($rating,num){ var num = num; $rating.on({ 'mouseover' : function() { var i = $(this).index(); init($rating, i); } , 'click' : function() { var i = $(this).index(); num = i; init($rating, i); } }, '.rating-item').on('mouseout', function(){ init($rating, num); }); } $.fn.extend({ rating : function(num=1) { $(this).each(function(i, el) { init(el, num); events($(this), num); }); } }); })(jQuery); $('.rating').rating(0)
有点跟不上老师的思路,按照自己的思路来了一遍,页面一片星星都能运行。但是不知道代码的质量如何。
基本的功能都实现了,也没有错误,听一遍就能写出来也算是很厉害了。
建议你把鼠标移除事件和鼠标点击事件利用事件绑定放在父元素上,这样可以降低浏览器的性能需求。