jQuery评分小星星效果如下图：完整代码如下：

效果如下图：
完整代码如下：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery_评分星星</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1743249_ztjw8b0gkyr.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .contanir {
            width: 460px;
            margin: 20px;
            /* border: 1px solid red; */
            display: flex;
            justify-content: flex-start;
        }

        i {
            font-style: normal;
            font-size: 16px;
        }

        .main .star {
            font-size: 20px;
            color: gold;
        }

        span {
            padding-left: 15px;
            font-size: 20px;
            color: gold;
        }
    </style>
</head>

<body>
    <div class="contanir">
        <i class="pingjia">请您为本次服务做出评价：</i>
        <div class="main">

        </div>
        <span></span>
    </div>


    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        let count = 10;
        let score = 5;
        $(function () {
            //循环创建星星
            for (let i = 0; i < count; i++) {
                //创建i标签并添加属性
                let star = $("<i>").addClass("iconfont").addClass("star");
                if (i < score) star.addClass("iconxingxing");
                else star.addClass("iconxingxing1");
                $(".main").append(star);
            }

            $(".star").mouseenter(function () {
                let index = $(this).index();
                $(".star").each(function (i) {
                    if (i <= index) {
                        $(this).addClass("iconxingxing").removeClass("iconxingxing1");
                    } else {
                        $(this).addClass("iconxingxing1").removeClass("iconxingxing");
                    }
                })
            });

            $(".star").mouseleave(function () {
                $(".star").each(function (i) {
                    if (i < score) {
                        $(this).addClass("iconxingxing").removeClass("iconxingxing1");
                    } else {
                        $(this).addClass("iconxingxing1").removeClass("iconxingxing");
                    }
                })
            });

            $(".star").click(function () {
                score = $(this).index() + 1;
                $(".pingjia").html("评价成功：");
                $("span").html(`${score}分`);
                if (score < 4) {
                    let yes = confirm(`亲平分过低哦，您确定选择评分为：${score}分吗？`);
                    $("span").css({
                        color: "red",
                    });
                    if (!yes) {
                        score = 5;
                        $("span").html(`${score}分`).css("color","gold");
                    }
                } else {
                    alert(`您好，您已选择评分为：${score}分，感谢您的参与~`);
                    $("span").css({
                        color: "gold",
                    });
                }
            })
            $("span").html(`${score}分`);
        })
    </script>
</body>

</html>