如何使用 jQuery 和 CSS 將數字轉換為星級？

使用jQuery 和CSS 將任何數字轉換為星級顯示

從數值建立星級顯示可以增強效果網站和應用程式上的評論分數和產品評級。可以使用 jQuery 和 CSS 的組合來簡化此任務。

jQuery 和 CSS 實作

解決方案涉及利用單一 CSS影像與自動產生的跨度elements:

CSS

span.stars, span.stars span {
    display: block;
    background: url(stars.png) 0 -16px repeat-x;
    width: 80px;
    height: 16px;
}
span.stars span {
    background-position: 0 0;
}

圖片

注意：將sta rs.png圖像複製到您自己的服務器並使用它

jQuery

$.fn.stars = function() {
    return $(this).each(function() {
        // Get the value and ensure it is within 0-5 range
        var val = parseFloat($(this).html());
        val = Math.max(0, (Math.min(5, val)));
        // Calculate star width and create a span holder
        var size = val * 16;
        var $span = $('<span></span>').width(size);
        // Replace the numerical value with stars
        $(this).html($span);
    });
}

HTML

<span></span>

使用

$(function() {
    $('span.stars').stars();
});

自訂

至將星星限制為一半或四分之一星星大小，修改JavaScript程式碼如下：

• 半顆星星： val = Math.round(val * 2) / 2;
• 四分之一星星： val = Math.round(val * 4) / 4;

說明

該>

說明

該腳本創建帶有星星精靈背景圖像的嵌套span 元素。外部跨度包含灰色星星，而內部跨度包含黃色星星。透過調整內部跨度的寬度，黃色星星會顯示出適當數量的灰色星星。

輔助功能注意事項可以透過隱藏內部數值來提高輔助功能內部跨度使用 text-indent: -9999px;，確保其可用於輔助技術。

以上是如何使用 jQuery 和 CSS 將數字轉換為星級？的詳細內容。更多資訊請關注PHP中文網其他相關文章！