從基於浮點數的圖像創建星級評分？

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>