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

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

本題旨在將給定的數字評級轉換為最多5 顆星的星級評級系統。利用 jQuery、CSS 和影像的強大功能，我們可以有效率地實現這種視覺表示。

CSS 實作

為星形元素建立兩種CSS 樣式：

span.stars, span.stars span {
    display: block;
    width: 80px;
    height: 16px;
}

span.stars span {
    background-position: 0 0;
}

這些樣式定義了區塊級跨度，具有用於顯示星星的初始寬度和高度。

影像資源

取得適當的星星影像，其寬度代表最大評級（在本例中為5）。確保它有兩個不同的部分：背景星星和實際星級。

jQuery 實作

定義一個名為star 的jQuery 外掛程式：

$.fn.stars = function() {
    return $(this).each(function() {
        var val = parseFloat($(this).html());
        var size = Math.max(0, (Math.min(5, val))) * 16;
        var $span = $('<span></span>').width(size);
        $(this).html($span);
    });
}

此外掛程式迭代選定的元素，提取數字評級，並產生寬度與所需評級成比例的跨距元素。它將原始數值替換為星號表示形式。

HTML 用法

在 HTML 中，將 stars 類別應用於包含數字評級的元素。

<span class="stars">3.8</span>

用法

DOM 完成後呼叫stars 外掛程式準備好：

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

輸出

結果將是使用提供的星形圖像的數字評級的視覺表示。透過調整評級值，您可以動態更新星級顯示。

附加說明

出於可訪問性目的，建議將數值作為隱藏文字或透過其他方式包含，以確保可訪問性禁用 CSS 的使用者。

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