Creating a star rating from an image based on a float number?
<p>recently I have wanted to turn a number into a star rating and I stumbled upon this post here: <a href="https://stackoverflow.com/a/1987545/1871869">https://stackoverflow.com/a/1987545/1871869</a> which is exactly what I wanted to do. I have followed this explanation but I can't seem to get it to work on my local environment, and I was wondering if someone could help me out. Here is my attempt:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$.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 = $('&lt;span /&gt;').width(size);
        // Replace the numerical value with stars
        $(this).html($span);
    });
}

$(function() {
    console.log("Calling stars()");
    $('.results-contents span.stars').stars();
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.results {
    font-size: 0;
    padding-bottom: 16px;
}

.results-content {
    font-size: 13px;
    display: inline-block;
    margin-left: 20px;
    vertical-align: top;
}

.results .results-content span.stars span.stars span {
    background: url('/resources/graphics/stars-icons.png') 0 -36px repeat-x;
    width: 175px;
    height: 80px;
}

.results .results-content span.stars {
    max-width: 80px;
    background-position: 0 0;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script type="text/template" id="results-template"&gt;
  &lt;div class="results"&gt;
    &lt;div class="results-content"&gt;
      &lt;span class="stars"&gt;4.0&lt;/span&gt; 
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/script&gt;</code></pre>
</div>
</div>
</p>

<p>Image of stars:</p>

<p><a href="https://i.stack.imgur.com/rwkqF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rwkqF.png" alt="stars icon"></a></p>

<p>What I wanted to do was to simply have the empty stars show, and then based on the rating, show the orange stars on top of the empty stars so that I can show full and half star ratings. However, all I get is a number to show up. My <code>console.log</code> above seems to be called but it seems like the actual rendering of the image and calculation of the star rating is not working. Any help would be appreciated. Thanks!</p>