根据浮点数从图像创建星级？

Question

最近我想把一个数字变成星级，我在这里偶然发现了这篇文章：https://stackoverflow.com/a/1987545/1871869 这正是我想做的。我遵循了这个解释，但我似乎无法让它在我的本地环境中工作，我想知道是否有人可以帮助我。这是我的尝试：

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

$(function() {
    console.log("Calling stars()");
    $('.results-contents span.stars').stars();
});

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

<script type="text/template" id="results-template">
  <div class="results">
    <div class="results-content">
      <span class="stars">4.0</span> 
    </div>
  </div>
</script>

星星图片：

我想做的是简单地显示空星，然后根据评级，在空星之上显示橙色星，这样我就可以显示全星和半星评级。但是，我得到的只是一个要显示的数字。我上面的console.log 似乎被调用了，但似乎图像的实际渲染和星级的计算不起作用。任何帮助，将不胜感激。谢谢！

Answer 1

您遇到了多个问题，从 CSS 样式错误到选择器错误。下面并不完美，但它正在渲染。

$.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))) * 36.5; 
    // Create stars holder
    var $span = $('<span> </span>').width(size); 
    // Replace the numerical value with stars
    $(this).empty().append($span);
  });
}

$(function() {
  console.log("Calling stars()");
  $('.results-content span.stars').stars();
});

.results {
  font-size: 0;
  padding-bottom: 16px;
}
.results-content {
  font-size: 13px;
  display: inline-block;
  margin-left: 20px;
  vertical-align: top;
  background: url('https://i.stack.imgur.com/rwkqF.png') 0 0 repeat-x;
  width: 185px;
  height: 35px;
}
.results .results-content span.stars span {
  background: url('https://i.stack.imgur.com/rwkqF.png') 0 -36px repeat-x;
  display: inline-block;
  height: 35px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="results">
  <div class="results-content">
    <span class="stars">0.0</span> 
  </div>
</div>
<div class="results">
  <div class="results-content">
    <span class="stars">0.5</span> 
  </div>
</div>
<div class="results">
  <div class="results-content">
    <span class="stars">1.0</span> 
  </div>
</div>
<div class="results">
  <div class="results-content">
    <span class="stars">1.5</span> 
  </div>
</div>
<div class="results">
  <div class="results-content">
    <span class="stars">2.0</span> 
  </div>
</div>
<div class="results">
  <div class="results-content">
    <span class="stars">2.0</span> 
  </div>
</div>
<div class="results">
  <div class="results-content">
    <span class="stars">2.5</span> 
  </div>
</div>
<div class="results">
  <div class="results-content">
    <span class="stars">3.0</span> 
  </div>
</div>
<div class="results">
  <div class="results-content">
    <span class="stars">3.5</span> 
  </div>
</div>
<div class="results">
  <div class="results-content">
    <span class="stars">4.0</span> 
  </div>
</div>
<div class="results">
  <div class="results-content">
    <span class="stars">4.5</span> 
  </div>
</div>
<div class="results">
  <div class="results-content">
    <span class="stars">5.0</span> 
  </div>
</div>