Populating a five star system in JavaScript with half stars

Question

I'm trying to figure out how to write a javascript function that takes an element + a score and uses jQuery addClass and removeClass to display the correct star rating (rounded to the nearest half star) but having problems... When I was using a "whole star" system I used something this system:

function() {
    $(this).prevAll().andSelf().addClass('active');  
    $(this).nextAll().removeClass('active');
}

Which no longer works for a half-star system. Does anyone have any advice? Here is the code I'm using now:

function populateStars(stars, score) {
    // Stars refers to the <ul> container with <li> stars inside (see later code).
    // This function should use stars (container) and score (rating between 1-5) to display stars
}

This is an example of the elements that the "stars" var refers to:

<ul class="big-stars">
    <li class="star-1 full">1</li>
    <li class="star-2 full">2</li>
    <li class="star-3 half">3</li>
    <li class="star-4">4</li>
    <li class="star-5">5</li>
</ul>

And the CSS that controls whether the star is full, empty or half-full.

.big-stars li {
    text-indent: -9999px;
    width: 49px;
    height: 46px;
    background: url('../images/big_star_empty.png');
    }
.big-stars .full {
    background: url('../images/big_star_full.png'); 
    }
.big-stars .half {
    background: url('../images/big_star_half.png'); 
    }

Joe · Accepted Answer · 2011-09-08T16:08:25.513

function populateStars (stars, score)
{
    // Get the number of whole stars
    var iWholeStars = Math.floor(score);
    // Do we want a half star?
    var blnHalfStar = (iWholeStars < score);

    // Show the stars
    for (var iStar = 1; iStar <= iWholeStars; iStar++)
    {
        $('li.star-' + iStar, stars).addClass('full');
    }

    // And the half star
    if (blnHalfStar)
    {
        $('.star-' + iStar, stars).addClass('half');
    }
}

populateStars($('.big-stars'), 3.5)

Obviously this can be condensed by just moving the variable declarations straight to where they're being used.

Edit: JSFiddle link :) http://jsfiddle.net/G8kwb/
Edit 2: JSFiddle link with rounding to nearest half number: http://jsfiddle.net/G8kwb/8/

Hey Joe, I like this approach actually - I'm tinkering with it now to try and find a way to round to the nearest .5/integer (the score var is pretty wildly variable). — Walker, Sep 08 '11 at 15:52

score 2 · Answer 2 · edited May 23 '17 at 11:47

2

Here's another possibility, using some jQuery lt and eq selectors:

function populateStars (stars, score)
{
   //round to nearest half
   score = Math.round(score * 2) / 2;

   var scoreParts = score.toString().split('.');
   $(stars + ' li:lt('+ scoreParts[0]+')').addClass('full');

   if(scoreParts[1])
   {
       $(stars + ' li:eq('+ scoreParts[0] +')').addClass('half');
   }
}

populateStars('.big-stars', 3.5);

You need to pass the parent class rather than the actual object to the method, but it's an interesting option for you.

Edit: here's an updated fiddle with rounding: jsFiddle, thanks to Joe for the initial version!

Also, I found the rounding logic in this interesting related question - Turn a number into star rating.

edited May 23 '17 at 11:47

Community

1
1

answered Sep 08 '11 at 15:42

RYFN

2,939
1
29
40

This is a great option as well - with one issue: The scores we pull down are very much dynamic - so the 'score' var might be 3.22354 or 3.575 - a system like the one you and Joe described is great (and elegant) but it doesn't "round" to the nearest star - and therefore almost always will display a half star (the chances of an average landing perfectly on an interger is pretty damn low). Is there a way to get this to round up to the nearest .5 or interger? – Walker Sep 08 '11 at 15:50
I used this version of your code: http://jsfiddle.net/JAhPK/18/ to incorporate a rounding scheme... not sure if it's the best code but it works! I really appreciate the help Zues! – Walker Sep 08 '11 at 16:00
1

I've updated my code to include a rounding mechanism and a related question, looks like I was too slow though! am glad I could help :) check it out here http://jsfiddle.net/JAhPK/19/ – RYFN Sep 08 '11 at 16:02

score 0 · Answer 3 · answered Jul 02 '20 at 20:28

Here is what I came up with, should it help anyone (using fontawesome for the stars, but one could substitute styled elements:

function getRankStars(rank){

    // Round down to get whole stars:
    var wStars = Math.floor(rank);
    // Check if whole is less than rank.
    // If less than rank, a half star is needed:
    var halfStars = (wStars < rank);

    var output="";
    //Loop through five stars:
    for(let i=1;i<=5;i++){
      //Less than or equal to stars, display a solid star:
      if(i<=wStars){
        output+="</i><i class='fas fa-star' style='color:#fbcc05'></i>";

      //If interation is after a whole star and a half star is needed, display half star:
      }else if( i==wStars+1 && halfStars==true ){
        output+="<i class='fas fa-star-half-alt' style='color:#fbcc05'></i>";

      //Otherwise, display a gray empty star:
      }else{
        output+="<i class='far fa-star' style='color:#bfbfbf'></i>";
      }
    }
    return output;
  }

Populating a five star system in JavaScript with half stars

3 Answers3