效果：

評分星星.png

html 部分：

<div class="container"></div>

css 部分：

<link rel="stylesheet" >
    <style>
        .star{
            font-size: 40px;
            color: orangered;
        }
    </style>

JS 部分：

    $(function () {

        // 初始化星星, 共5顆，3顆是實(shí)心的
        let range = 5, score = 3;

        for(let i = 0; i< range; i++){
            let star = $('<i/>').addClass('iconfont').addClass('star');   // 創(chuàng)建元素
            if (i < score){
                star.addClass('iconstar1')   // 分?jǐn)?shù)顯示實(shí)心星星
            }else{
                star.addClass('iconstar')   // 未達(dá)到的顯示空心星星
            }
            $('.container').append(star);
        }

        // 鼠標(biāo)移動選擇評分
        let stars = $('.star');
        stars.mouseenter(function () {
            let index = $(this).index();
            stars.each(function (i) {
                if (i <= index){
                    $(this).addClass('iconstar1').removeClass('iconstar')
                }else{
                    $(this).addClass('iconstar').removeClass('iconstar1')
                }
            })
        });

        // 鼠標(biāo)離開時(shí)顯示初始的打分
        stars.mouseleave(function () {
            stars.each(function (i) {
                if(i < score){
                    $(this).addClass('iconstar1').removeClass('iconstar')
                }else{
                    $(this).addClass('iconstar').removeClass('iconstar1')
                }

            })
        });


        // 鼠標(biāo)點(diǎn)擊修改評分
        stars.click(function () {
            score = $(this).index() + 1
        })

    })