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