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

將數字轉換為星級：使用 jQuery 和 CSS 的多功能解決方案

設計使用者介面時，通常需要使用星星來表示數位評級。儘管有 jQuery 插件可用，但調整這些插件以根據給定的數字顯示星級評級可能是一項具有挑戰性的任務。本文結合使用 CSS、jQuery 和預定義圖像，探討了應對這項挑戰的強大解決方案。

CSS 定義

要設定星級評級的樣式，請使用以下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;
}

在此CSS 區塊中，外部跨度(span. stars) 充當各個星號(span.stars) 的容器跨度）。這兩個元素都設定為區塊級元素，並給出帶有特定偏移量和重複模式的stars.png背景影像。

影像要求

影像檔案stars.png用作包含黃色（實心）和灰色（空心）星星影像的精靈。該圖片必須儲存在使用者的伺服器上；不建議熱連結到提供的圖像。

jQuery 實作

核心功能是使用名為 $.fn.stars 的 jQuery 外掛程式實現的。該插件迭代帶有星級類別的每個元素，並將其數位內容轉換為星級顯示。計算根據給定的數字確定黃色星星的寬度，確保按比例表示。

$.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></span>').width(size);
        // Replace the numerical value with stars
        $(this).html($span);
    });
}

HTML 用法

要使用此插件，只需將類星星應用於跨度包含數字評級。

<span class="stars">4.8618164</span>
<span class="stars">2.6545344</span>
<span class="stars">0.5355</span>
<span class="stars">8</span>

呼叫

使用以下指令觸發外掛程式code:

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

輔助功能注意事項

為了確保輔助功能，建議保留span元素中的原始數值，但使用text-indent: -9999px 使其在視覺上隱藏。這種方法允許螢幕閱讀器和禁用 CSS 的用戶存取底層資料。

結論

該解決方案使用jQuery 和CSS 有效地將數位評級轉換為星級評級，使其成為一種多功能的顯示工具各種網路應用程式中的評級和用戶回饋。

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