自己的思路亂寫的,請(qǐng)指教
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)
有點(diǎn)跟不上老師的思路,按照自己的思路來了一遍,頁面一片星星都能運(yùn)行。但是不知道代碼的質(zhì)量如何。
2017-06-03
基本的功能都實(shí)現(xiàn)了,也沒有錯(cuò)誤,聽一遍就能寫出來也算是很厲害了。
建議你把鼠標(biāo)移除事件和鼠標(biāo)點(diǎn)擊事件利用事件綁定放在父元素上,這樣可以降低瀏覽器的性能需求。