星級評分系統（jQuery）

Question

我猜你對5星級評分系統非常熟悉，這個評分系統經常用於網站評分項目？當我在谷歌上看，只有jQuery插件使用精靈等。我如何使用12張圖像（0,0.5,1,1.5等）製作星級評分系統？

我想這樣做，因爲我已經得到了圖像，這是一個大量的工作，對它們進行編輯。

Answer 1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script> 
function setRating(number) 
{ 
    jQuery('#main').css('background','url(images/'+number+'-star.gif) no-repeat');  
} 

function saveRating(number) 
{ 
    jQuery('.rating').attr('onmouseout','setRating(\''+number+'\')'); 
    alert(number);   
} 
</script> 
<style> 
.rating 
{ 
    width:8px; 
    height:16px; 
    float:left;  
} 
#main 
{ 
    width:80px; 
    height:16px;  
} 
</style> 
<div id="main" style="background:url(images/1.0-star.gif) no-repeat;"> 
    <div class="rating" onmouseover="setRating('0.5')" onclick="saveRating('0.5');" onmouseout="setRating('1.0')"></div> 
    <div class="rating" onmouseover="setRating('1.0')" onclick="saveRating('1.0');" onmouseout="setRating('1.0')"></div> 
    <div class="rating" onmouseover="setRating('1.5')" onclick="saveRating('1.5');" onmouseout="setRating('1.0')"></div> 
    <div class="rating" onmouseover="setRating('2.0')" onclick="saveRating('2.0');" onmouseout="setRating('1.0')"></div> 
    <div class="rating" onmouseover="setRating('2.5')" onclick="saveRating('2.5');" onmouseout="setRating('1.0')"></div> 
    <div class="rating" onmouseover="setRating('3.0')" onclick="saveRating('3.0');" onmouseout="setRating('1.0')"></div> 
    <div class="rating" onmouseover="setRating('3.5')" onclick="saveRating('3.5');" onmouseout="setRating('1.0')"></div> 
    <div class="rating" onmouseover="setRating('4.0')" onclick="saveRating('4.0');" onmouseout="setRating('1.0')"></div> 
    <div class="rating" onmouseover="setRating('4.5')" onclick="saveRating('4.5');" onmouseout="setRating('1.0')"></div> 
    <div class="rating" onmouseover="setRating('5.0')" onclick="saveRating('5.0');" onmouseout="setRating('1.0')"></div> 
</div> 

這就是我一直在尋找。

Answer 2

你有沒有發現我的關於同一問題的老的答案嗎？

Turn a number into star rating display using jQuery and CSS

的圖像是簡單的，你應該沒有問題，轉換您的現成的圖像了這一點。

而且插件本身是很簡單的，你應該能夠很容易地理解它的內部運作，以使其適應自己的需要。目前該插件只處理星星的顯示，而不是實際選擇，但不應該很難將其轉換爲此類。

Answer 3

有plentyofspritegeneratorsout there將生成的CSS和你的精靈形象。 :)

Answer 4

NETTUTS有這篇文章，可能是你正在尋找的東西：

http://net.tutsplus.com/tutorials/html-css-techniques/building-a-5-star-rating-system-with-jquery-ajax-and-php/