Any way to compress this jquery 5 star rating function?

Question

I'm trying to shrink this down... but can't figure out a way to do it. Basically am wondering if theres any way to compress it down to 5 lines or so??

Thanks for your help!

$(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">');
});
});

Here is the 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

Create a loop for 1 until #rate_result and ouput $("#star" + count).html('<img />');

Answer 2

Step 1:

Create 1 variable to hold the url string:

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

then replace all those strings with your variable.

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

Answer 3

add a class called star to each star

$('.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 4

Perhaps this will give you an idea how you can compress your code a bit:

http://stackoverflow.com/questions/1987524/turn-a-number-into-star-rating-display-using-jquery-and-css/1987545#1987545

That code currently turns numbers to stars but can easily be adapted to handle click events for changing the value.

There's no need to do separate img elements for each star, only thing you need is two spans which have the stars as an background image and then just apply a proper width to those spans.

Answer 5

Untested, but I'd guess this would work.

$(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">');
}
});
    }
});

Answer 6

Here's a bit of compression:

$(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);
    });
});