任何方式來壓縮這jQuery的5星評級功能？

Question

我試圖縮小這個...但不能找出一種方法來做到這一點。 基本上我想知道是否有任何方法壓縮到5行左右？

感謝您的幫助！

$(function() { 
    $('.star-one').live("click",function() { 
    $("#rate_result").html('1'); 
    $("#star1").html('<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">'); 
    }); 

    $('.star-two').live("click",function() { 
    $("#rate_result").html('2'); 
    $("#star1").html('<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">'); 
    $("#star2").html('<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">'); 
    }); 

    $('.star-three').live("click",function() { 
    $("#rate_result").html('3'); 
    $("#star1").html('<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">'); 
    $("#star2").html('<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">'); 
    $("#star3").html('<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">'); 
    }); 

    $('.star-four').live("click",function() { 
    $("#rate_result").html('4'); 
    $("#star1").html('<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">'); 
    $("#star2").html('<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">'); 
    $("#star3").html('<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">'); 
    $("#star4").html('<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">'); 
    }); 

    $('.star-five').live("click",function() { 
    $("#rate_result").html('5'); 
    $("#star1").html('<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">'); 
    $("#star2").html('<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">'); 
    $("#star3").html('<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">'); 
    $("#star4").html('<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">'); 
    $("#star5").html('<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">'); 
    }); 
}); 

下面是HTML：

<div id="rate_result"></div> 
<div id="stars-container"> 
    <ul class='star-rate'> 
    <li id="star1"> 
     <a href='#' title='' class="star-one" id="1">mmmm</a> 
    </li> 
    <li id="star2"> 
     <a href='#' title='' class="star-two" id="2">try again</a> 
    </li> 
    <li id="star3"> 
     <a href='#' title='' class="star-three" id="3">mmm not bad</a> 
    </li> 
    <li id="star4"> 
     <a href='#' title='' class="star-four" id="4">this is cool ya!</a> 
    </li> 
    <li id="star5"> 
     <a href='#' title='' class="star-five" id="5">very good</a> 
    </li> 
    </ul> 
</div> 

Answer 1

這裏有點壓縮：

$(function() { 
    var star_tag = '<img src="http://larsonreviews.com/rating/star_ena.gif" border="0" alt="*">'; 
    $('.star-one').live("click",function() { 
     $("#rate_result").html('1'); 
     $("#star1").html(star_tag); 
    }); 
    $('.star-two').live("click",function() { 
     $("#rate_result").html('2'); 
     $("#star1, #star2").html(star_tag); 
    }); 
    $('.star-three').live("click",function() { 
     $("#rate_result").html('3'); 
     $("#star1, #star2, #star3").html(star_tag); 
    }); 
    $('.star-four').live("click",function() { 
     $("#rate_result").html('4'); 
     $("#star1, #star2, #star3, #star4").html(star_tag); 
    }); 
    $('.star-five').live("click",function() { 
     $("#rate_result").html('5'); 
     $("#star1, #star2, #star3, #star4, #star5").html(star_tag); 
    }); 
}); 

Answer 2

1創建一個循環，直到#rate_result和輸出中$("#star" + count).html('<img />');

Answer 3

第1步：

創建1個變量來保存URL字符串：

var img = '<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">'; 

然後用你的變量替換所有這些字符串。

$("#star1").html(img); 

Answer 4

一個所謂的明星類添加到每個明星

$('.star').live("click",function() { 
$("#rate_result").html($(this).prevAll('.star').length+1); 
$(this).prevAll('.star').addClass('enabled') // where enabled would add a background image(like star_ena.gif) 
}); 

Answer 5

也許這會給你一個想法，你可以如何壓縮你的代碼位：

Turn a number into star rating display using jQuery and CSS

該代碼目前將數字轉換爲星號，但可以輕鬆進行調整編輯處理單擊事件以更改值。

有沒有必要爲每個星星做單獨的img元素，只有你需要的是兩個跨度有星星作爲背景圖像，然後適用於這些跨度適當的寬度。

Answer 6

未經測試，但我想這會奏效。

$(function() { 
var textrep=new Array("zero","one","two", "three", "four", "five"); 
for (i=1; i<=5; i++) 
{ 
$('.star-'+textrep[i]).live("click",function() { 
$("#rate_result").html(i); 
for (j=1; j<=i; j++) 
{ 
    $("#star"+j).html('<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">'); 
} 
}); 
    } 
});