简单的评分实现

利用iconFont文字颜色属性实现电影/商品评分的打分。

css部分：

   <style>

        .star {

            color: rgb(241, 184, 77);

            font-size: 30px;

            cursor: pointer;

        }

    </style>

html部分：

    <div class="container">

    </div>

jq部分

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>

        $(function () {

            let count = 10

            let score = 5

            for (let i = 0; i < count; i++) {

                let star = $("<i/>").addClass("iconfont").addClass("star")

                if (i < score) star.addClass("icon-xingxing")

                else star.addClass("icon-xingxing2")

                $(".container").append(star)

            }

            $(".star").mouseenter(function () {

                let index = $(this).index()

                $(".star").each(function (i) {

                    if (i <= index)

                        $(this).addClass("icon-xingxing").removeClass("icon-xingxing2")

                    else

                        $(this).addClass("icon-xingxing2").removeClass("icon-xingxing")

                })

            })

            $(".star").mouseleave(function () {

                $('.star').each(function (i) {

                    if (i < score)

                        $(this).addClass('icon-xingxing').removeClass('icon-xingxing2')

                    else

                        $(this).addClass('icon-xingxing2').removeClass('icon-xingxing')

                })

            })

            $(".star").click(function(){

                score = $(this).index() + 1

            })

        })

    </script>