如何使用 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中文网其他相关文章！