jquery stars rating control

Question

我試圖創建下面描述的功能：

我得到了5顆星的圖像。在服務器上，我決定在每幅圖像中應顯示哪種圖像顏色。如果在服務器上計算的評分是3，那麼前三顆星是黃色，而後兩顆是灰色。

我想實現功能（使用jquery）。當用戶將任何恆星懸停時，這個和之前的顏色會變成紅色（圖像的url被改變），所有下一個恆星都會變成灰色，但是當光標離開恆星時，那些5星的狀態應該像進入之前一樣。

我寫了這樣的事情，但它不是好事，而不是真正的工作，我將它想：

var stars = { 
    initStars: function initStars() { 

     $('.starsHolder').hover(function() { 
     this.star1ImageUrl = $(this).children('.star').eq(0).attr('src'); 
     this.star2ImageUrl = $(this).children('.star').eq(1).attr('src'); 
     this.star3ImageUrl = $(this).children('.star').eq(2).attr('src'); 
     this.star4ImageUrl = $(this).children('.star').eq(3).attr('src'); 
     this.star5ImageUrl = $(this).children('.star').eq(4).attr('src'); 
     $(this).children('.star').hover(function() { $(this).attr('src', '/star_red.png'); $(this).prevAll('.star').attr('src', '/star_red.png');}, function() { }); 
     }, function(){ 
     $(this).children('.star').eq(0).attr('src', this.star1ImageUrl); 
     $(this).children('.star').eq(1).attr('src', this.star2ImageUrl); 
     $(this).children('.star').eq(2).attr('src', this.star3ImageUrl); 
     $(this).children('.star').eq(3).attr('src', this.star4ImageUrl); 
     $(this).children('.star').eq(4).attr('src', this.star5ImageUrl); 
     $(this).children('.star').unbind(); 
     }) 
    } 
}; 

明星們的asp：ImageButton的這就是爲什麼我改變src屬性，但它並不重要。星星在跨度類starsHolder

感謝與

Answer 1

任何幫助，有很多jQuery插件這已經這樣做了。這裏有一些。帶你去挑選。

http://www.fyneworks.com/jquery/star-rating/

http://www.wbotelhos.com/raty/

http://orkans-tmp.22web.net/star_rating/