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>

Can you share the markup you're using? That would help. – Guillaume Flandre Jan 28 '10 at 17:41 — Guillaume Flandre, Jan 28 '10 at 17:41

score 2 · Accepted Answer · answered Jan 28 '10 at 17:47

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

Thanks so much, thats perfect! Think I've developed the simplest jquery 5 star rating system out there... that works with the latest version of jquery! I'll setup a demo page at one of my sites so everyone can check it out in a bit! — brandon, Jan 28 '10 at 17:51
It disables the lower ratings too! Works perfect... still working on compressing it! — brandon, Jan 28 '10 at 18:02

score 1 · Answer 2 · answered Jan 28 '10 at 17:42

1

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

answered Jan 28 '10 at 17:42

Funky Dude

3,867
2
23
33

score 1 · Answer 3 · edited May 23 '17 at 12:06

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

Turn a number into star rating display using jQuery and CSS

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.

score 0 · Answer 4 · answered Jan 28 '10 at 17:42

0

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

answered Jan 28 '10 at 17:42

Ben Fransen

10,884
18
76
129

Woah... way more answers to do this than I thought! That's why I love jquery... you can do functions in 5 lines of code compared to 20-30 lines of code in the old ajax way! Thanks again... I appreciate all the help! – brandon Jan 28 '10 at 18:01

score 0 · Answer 5 · answered Jan 28 '10 at 17:42

0

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);

answered Jan 28 '10 at 17:42

Sam

2,166
2
20
28

score 0 · Answer 6 · answered Jan 28 '10 at 17:46

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

Any way to compress this jquery 5 star rating function?

6 Answers6