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

最近，我想将数字转换为星级，然后在这里偶然发现了这篇文章：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似乎被调用了，但是图像的实际渲染和星级评定的计算似乎不起作用。任何帮助，将不胜感激。谢谢！

最佳答案

从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>

关于javascript - 根据浮点数从图像中创建星级？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40850710/