网页中实现五角星评分

最新推荐文章于 2025-08-17 16:33:56 发布

原创最新推荐文章于 2025-08-17 16:33:56 发布 · 2.5k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

html5

本文介绍了一种使用jQuery实现的五角星等级展示效果。在未选择时，鼠标悬停会将当前及之前的五角星变为实心状态；选择后，选定及之前的五角星保持实心状态。

原文链接：小宁博客

描述：该功能实现的事通过五角星的状态来展示等级。实心五角星表示等级。用户在没有点击五角星的时候，鼠标经过哪一个五角星，该五角星和之前的五角星变为实心的五角星，之后的五角星还是空心的五角星，鼠标离开之后，恢复为空心。当用户点击了某一五角星之后，该五角星和之前的五角星变为实心的五角星，之后的五角星还是空心的五角星，鼠标离开之后，点击的五角星及其之前的五角星变为实心的五角星。之后为空心五角星。jquery的版本是1.8.
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五角星等级</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .comment {
            font-size: 40px;
            color: #fff536;
        }

        .comment li {
            float: left;
            cursor: pointer;
        }

        ul {
            list-style: none;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function () {
            var wjx_none = '☆';
            var wjx_sel = '★';

            //鼠标放上去当前的li和之前所有的li内容全部变为实心五角星，移开变为空心。
            $(".comment li").on("mouseenter",function () {
                $(this).text(wjx_sel).prevAll("li").text(wjx_sel).end().nextAll("li").text(wjx_none);
            });
            $(".comment li").on("mouseleave",function () {
                if($("li.current").length === 0){
                    $(".current").text(wjx_none);
                }else {
                    $("li.current").text(wjx_sel).prevAll("li").text(wjx_sel).end().nextAll("li").text(wjx_none);
                }
            });
            //鼠标点击那个li，当你前li和之前所有的li都变成实心五角星，其他变为空心。
            $(".comment li").on("click",function () {
                $(this).attr("class","current").siblings("li").removeAttr("class");
            })
        });
    </script>
</head>
<body>
    <ul class="comment">
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
    </ul>
</body>
</html>