星星评分效果

<style>
    .star {
        font-size: 30px;
        color: gold;
        cursor: pointer;
    }
</style>

<div class="container">

</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(function () {
        let count = 10 //设定常数为10
        let score = 5 //设定默认分数为5

        for (let i = 0; i < count; i++) { //循环十次 有十个小星星 
            let star = $("<i/>").addClass('iconfont').addClass('star')//创造一个i标签 给其添加iconfont和star的类名 
            if (i < score) star.addClass('icon-xingxing1')//如果循环的次数小于默认的score 那么就在star 后面加上类名icon- xingxing1 xingxing1代表着实心的星星  就是把小于等于5的星星全部换成实心的星星
            else star.addClass('icon-xingxing') //如果大于5的话 那么就加上 icon-xingxing类名 代表着空心的星星 把大于5的星星都变成空心的星星
            $('.container').append(star)//container的div里面添加十个star的标签语句
        }


        $('.star').mouseenter(function () { //鼠标移入的效果  获取所有类名为star的语句
            let index = $(this).index()//鼠标指向哪 就调用哪个star 把这个star的下标赋给index
            $('.star').each(function (i) {//遍历所有star i为当前悬浮的下标
                if (i <= index)//如果i大于悬浮下标
                    $(this).addClass('icon-xingxing1').removeClass('icon-xingxing') //那么就让小于i的下标都变成实心
                else
                    $(this).addClass('icon-xingxing').removeClass('icon-xingxing1')
            })
        })

        $('.star').mouseleave(function () {//鼠标离开
            $('.star').each(function (i) {//遍历
                if (i < score)//如果当前选取的下标 小于5
                    $(this).addClass('icon-xingxing1').removeClass('icon-xingxing')//那么就让所有小于5的下标都加上实心 移除空心
                else
                    $(this).addClass('icon-xingxing').removeClass('icon-xingxing1')
            })
        })


        $('.star').click(function () { //鼠标点击
            score = $(this).index() + 1//score重新赋值 等于鼠标点击的那个star下标加1  if (i < score) star.addClass('icon-xingxing1')  小于这个下标的全部添加实心星星
        })


    })
</script>