星级评分

<div class="container"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>

js，实现星级评分，初始5颗星，随着鼠标悬浮改变星星颗数

//定义总数量        
let count = 10;
        let score = 5;
        //初始化星星
        for (let i = 0; i < count; i++) {
            //创建i标签
            let icon = $('<i/>').addClass('iconfont star')
            //前5个实心
            if (i < score) icon.addClass('icon-star')
            else icon.addClass('icon-star-o')
            //添加到容器
            $('.container').append(icon)
        };
        $('.container .star').mouseenter(function () {
            //当前悬浮的星星之前的都变成实心
            $(this).addClass('icon-star').removeClass('icon-star-o')
            $(this).prevAll().addClass('icon-star').removeClass('icon-star-o')
            //后面的变空心的
            $(this).nextAll().addClass('icon-star-o').removeClass('icon-star')
            // for (let i = 0; i < count; i++) {
            //     if (i <= $(this).index())
            //         $('.container .star').eq(i).addClass('icon-star').removeClass('icon-star-o')
            //     else            //         $('.container .star').eq(i).addClass('icon-star-o').removeClass('icon-star')
            // }
        });
        //鼠标离开时根据score来控制实心
        $('.container .star').mouseleave(function () { 
           for (let i = 0; i < count; i++) {
                if (i < score)
                    $('.container .star').eq(i).addClass('icon-star').removeClass('icon-star-o')
                else
                    $('.container .star').eq(i).addClass('icon-star-o').removeClass('icon-star')
            }
        });
        //点击时改变分数
        $('.container .star').click(function () {
            score = $(this).index() + 1
        });

css样式

.star {
            color: red;
            cursor: pointer;
        }