星星評分的實現和改進
阿新 • • 發佈：2018-11-22
1，首先下載星星的圖片
下載logo的網址 https://icomoon.io/
2，使用雪碧圖
雪碧圖合成地址 https://www.toptal.com/developers/css/sprite-generator
.bg-star_o { width: 26px; height: 28px; background: url('css_sprites.png') -10px -10px; }
.bg-star { width: 26px; height: 28px; background: url('css_sprites.png') -10px -58px; }
.bg-star_half_empty { width: 26px; height: 28px; background: url('css_sprites.png') -10px -106px; }
最後生成的雪碧圖： 
3，簡單程式碼（沒有使用事件委託的js實現）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>stars</title> <style> body,ul,li{ margin:0; padding:0; } li{ list-style: none; } .rating{ height:28px; width:130px; margin:100px auto; } .rating-item{ float:left; height:28px; width:26px; background: url('starSprite.png') -10px -10px no-repeat; cursor: pointer; } </style> </head> <body> <ul id="rating" class="rating"> <li class="rating-item" title="bad"></li> <li class="rating-item" title="notgood"></li> <li class="rating-item" title="soso"></li> <li class="rating-item" title="good"></li> <li class="rating-item" title="excellent"></li> </ul> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> <script> var num =2; var $rating = $('#rating'); var $item = $rating.find('.rating-item'); var lightOn = function(num){ $item.each(function(index){ if(index < num){ $(this).css('background-position','-10px -58px'); }else{ $(this).css('background-position','-10px -10px'); } }) } lightOn(num); //給每個星星都繫結事件，造成浪費，應該用事件委託 $item.mouseover(function(){ lightOn($(this).index()+1); }).click(function(){ num = $(this).index()+1; }); $rating.mouseout(function(){ lightOn(num); })； </script> </body> </html>
4，改進程式碼
使用事件委託，使用一個自執行函式可以避免全域性變數的汙染,避免全域性變數汙染
編寫成一個可複用方法，同時編寫為Jquery外掛，兩種呼叫方法
//使用一個自執行函式可以避免全域性變數的汙染 //可複用方法 var rating = (function(){ var lightOn = function($item,num){ $item.each(function(index){ if(index < num){ $(this).css('background-position','-10px -58px'); }else{ $(this).css('background-position','-10px -10px'); } }) } var init = function(el,num){ var $rating = $(el); var $item = $rating.find('.rating-item'); lightOn($item,num); //給每個星星都繫結事件，造成浪費，應該用事件委託 $rating.mouseover(function(e){ var ev = e || window.event; var target = ev.target || ev.srcElement; lightOn($item,parseInt(target.id)+1); }).click(function(e){ var ev = e || window.event; var target = ev.target || ev.srcElement; num = parseInt(target.id)+1; }).mouseout(function(){ lightOn($item,num); }); } //Jquery外掛編寫 $.fn.extend({ rating:function(num){ //為了連綴需要返回this，遍歷返回 return this.each(function(){ init(this,num) }) } }) return { init:init } })(); rating.init('#rating',2); $('#rating').rating(4);