Converting values into star rating using JQuery

Question

I am having a list of values inside a loop. I need to turn all those values into exact 5 star rating. I have searched a lot, but i cant get the exact answer what i need.

I have tried this: Turn a number into star rating display using jQuery and CSS

But it is working only for single value. Consider my code is like this:

<?php
$a=0;
while($a<5)
{
    echo "<input type=text value=$a><br/>";
    //need to display star rating here
    $a=$a+1.2;
}
?>

its just for an example. I want to convert all the values in the textbox into a star rating. In my original code i am taking a loop of values from DB. Please help me to do this.

this code is working fine for single value.

<html>
<head>
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        $(function() {          

                $('p').html('<span class="stars">'+parseFloat($('input[name=amount]').val())+'</span>');
                $('span.stars').stars();


        });

        $.fn.stars = function() {
            return $(this).each(function() {
                $(this).html($('<span />').width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16));
            });
        }
    </script>
    <style type="text/css">
        span.stars, span.stars span {
            display: block;
            background: url(image/stars.png) 0 -16px repeat-x;
            width: 80px;
            height: 16px;
        }

        span.stars span {
            background-position: 0 0;
        }
    </style>
</head>
<body>

    <input type="text" name="amount" value="4" />

<p>
   <span class="stars">2.4618164</span></p>

</body>
</html>

but i dont know how to do this for loop of values.

@atmd just to view my ratings exactly in all points(its just for an example). — user3784251, Jan 27 '15 at 12:18
I fixed this in a [jsfiddle](http://jsfiddle.net/nm68ndrw/). However, I'm not sure what kind of loop you want. Please check the jsfiddle and give an example of the loop you're trying to achieve. — Casper, Jan 27 '15 at 13:28
@Casper i want to have list of star ratings, say for the loop given above — user3784251, Jan 27 '15 at 14:07

score 2 · Answer 1 · answered Mar 19 '15 at 17:59

You can also do this without using jquery. You just need to use

<div class="star-box" style="display: inline-block;width:auto ;white-space: nowrap;">
    <span class="unfilled" style="color:#d3d3d3; position: absolute;top: 0;left: 0;">&#9733;&#9733;&#9733;&#9733;&#9733;</span>
    <span class="filled" style="color:#e9ce18; white-space: nowrap; overflow: hidden;position: absolute;top: 0;left: 0;width:12.8px">&#9733;&#9733;&#9733;&#9733;&#9733;</span>
</div>

Here &#9733 is the hexadecimal code for white star and &#9734 is the hexadecimal code for black star in html. Color grey is assigned to unfilled stars and yellow color to filled stars. And we are using the absolute positing so that the stars overlap over each other. Filled class is placed on top of the unfilled class. Width of the unfilled stars is auto. And filled stars shown depends upon the width you have specified for the filled class.

Check http://jsfiddle.net/gyogesh0309/m28b1383/.

Casper · Answer 2 · 2015-01-27T18:14:16.733

Use the JSFiddle code for the basics. Your PHP should look like this: (assuming $a contains the star value)

<?php
$a=0;
while($a<5)
{
  echo '<span class="stars">'.$a.'</span>';
  $a=$a+1.2;
}
?>

Since I'm not sure what you want with your while loop, it seems you could use a for loop as well, which would be a better choice. But this depends on what you need the loop for of course.

Total should be something like this:

<html>
<head>
    <style type="text/css">
        span.stars, span.stars span {
            display: block;
            background: url(http://www.ulmanen.fi/stuff/stars.png) 0 -16px repeat-x;
            width: 80px;
            height: 16px;
        }

        span.stars span {
            background-position: 0 0;
        }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" />
    <script type="text/javascript">
        $.fn.stars = function() {
            return $(this).each(function() {
                // Get the value
                var val = parseFloat($(this).html());
                // Make sure that the value is in 0 - 5 range, multiply to get width
                var size = Math.max(0, (Math.min(5, val))) * 16;
                // Create stars holder
                var $span = $('<span />').width(size);
                // Replace the numerical value with stars
                $(this).html($span);
            });
        }

        $( document ).ready(function() {
            $('span.stars').stars();
        });
    </script>
</head>
<body>
    <?php
        $a=0;
        while($a<5)
        {
            echo '<span class="stars">'.$a.'</span>';
            $a=$a+1.2;
        }
    ?>
</body>

i need to have list of star ratings...ie, first for 0, then for 1.2, then for 2.4,then 3.6,4.8 like wise i need the rating. — user3784251, Jan 27 '15 at 17:00
no... when i do it in a loop it wont work.. please give me some suggestion — user3784251, Jan 27 '15 at 17:08
updated although I can't test it anymore since the image is taken offline — Casper, Jan 27 '15 at 18:14
it displays the values and empty stars... not working... :-( Anyway thanks for your support. — user3784251, Jan 27 '15 at 18:26

score 0 · Answer 3 · answered Mar 03 '20 at 10:49

if you want to convert numbers into stars then you can use it.only you have to do is change width of it by your database numbers

.containerdiv {
  border: 0;
  float: left;
  position: relative;
  width: 300px;
}

.cornerimage {
  border: 0;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

img {
  max-width: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="containerdiv">
  <div>
    <img src="https://image.ibb.co/jpMUXa/stars_blank.png" alt="img">
  </div>
  <div class="cornerimage" style="width:50%;">
    <img src="https://image.ibb.co/caxgdF/stars_full.png" alt="">
  </div>
  <div>

js fiddle

score 0 · Answer 4 · answered Mar 03 '20 at 10:56

You can do like this also here is the sample code

var starMap = {
  '0.5': 'half',
  '1': '1',
  '1.5': '1 and a half',
  '2': '2',
  '2.5': '2 and a half',
  '3': '3',
  '3.5': '3 and a half',
  '4': '4',
  '4.5': '4 and a half',
  '5': '5'
}

function roundToHalf(value) {
  return Math.round(value * 2) / 2;
}

function convertToString(value) {
  return Number(value).toString();
}

function setStarRating(value) {
  var fieldValue = starMap[convertToString(roundToHalf(value))];
  $("input[name=rating][value='" + fieldValue + "']").attr('checked', 'checked');
}

$(document).ready(function() {
  var value = 4.4;
  setStarRating(value);
});

.rating_widgets {
  display: flex;
  margin-top: 25px;
}

.rating {
  border: none;
  float: left;
}

.rating>input {
  display: none;
}

.rating>label:before {
  margin: 5px;
  font-size: 24px;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

.rating>.half:before {
  content: "\f089";
  position: absolute;
}

.rating>label {
  color: #ddd;
  float: right;
}

.rating>input:checked~label,
.rating:not(:checked),
.rating:not(:checked) {
  color: #FFD700;
}

.rating>input:checked,
.rating>input:checked,
.rating>input:checked~label,
.rating>input:checked~label {
  color: #FFED85;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/a2e210f715.js"></script>
<div class="rating_widgets">
  <fieldset class="rating">
    <input type="radio" id="star5" name="rating" />
    <label class="full" for="star5" title="Awesome - 5 stars"></label>
    <input type="radio" id="star4half" name="rating" value="4 and a half" />
    <label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
    <input type="radio" id="star4" name="rating" value="4" />
    <label class="full" for="star4" title="Pretty good - 4 stars"></label>
    <input type="radio" id="star3half" name="rating" value="3 and a half" />
    <label class="half" for="star3half" title="Good - 3.5 stars"></label>
    <input type="radio" id="star3" name="rating" value="3" />
    <label class="full" for="star3" title="Good - 3 stars"></label>
    <input type="radio" id="star2half" name="rating" value="2 and a half" />
    <label class="half" for="star2half" title="ok - 2.5 stars"></label>
    <input type="radio" id="star2" name="rating" value="2" />
    <label class="full" for="star2" title="ok - 2 stars"></label>
    <input type="radio" id="star1half" name="rating" value="1 and a half" />
    <label class="half" for="star1half" title="Bad - 1.5 stars"></label>
    <input type="radio" id="star1" name="rating" value="1" />
    <label class="full" for="star1" title="Very bad - 1 star"></label>
    <input type="radio" id="starhalf" name="rating" value="half" />
    <label class="half" for="starhalf" title="Very bad - 0.5 stars"></label>
  </fieldset>
</div>

Converting values into star rating using JQuery

4 Answers4