满意度评价（HTML JQuery CSS）

满意度评价（HTML+JQuery+CSS）

最近负责的一个项目需求调研过程中，需要设计一个满意度评价的功能，本着节约时间的原则，先在度娘上查了各种资料，发现没有特别合适的，所以决定自己写一个，使用HTML+JQuery+CSS实现一个简单的满意度评价功能，有进阶需求可在此基础上修改

HTML部分

<div>
    <span>满意度评价：</span>
    <div class="appraisediv">
        <label class="startn"></label>
        <label class="startn"></label>
        <label class="startn"></label>
        <label class="startn"></label>
        <label class="startn"></label>
    </div>
</div>

CSS部分（所需图片可以到下面的网站自行下载）

https://www.iconfont.cn/

 <style type="text/css">
 		//图片自行下载
        .startn {
            background-image: url("image/starno.png"); 
            background-repeat: no-repeat;
            height: 16px;	//根据图片大小自行调整
            width: 16px;	   //根据图片大小自行调整
            transition-duration: 0.2s;
            cursor: pointer;
        }
        //图片自行下载
        .starty {
            background-image: url("image/staryes.png");
            background-repeat: no-repeat;
            height: 16px;   //根据图片大小自行调整
            width: 16px;    //根据图片大小自行调整
            transition-duration: 0.2s;
            cursor: pointer;
        }
        .appraisediv {
            width: 200px;
            height: 200px;
            display: flex;
        }
    </style>

JS部分

<script type="text/javascript">
    $('.appraisea').on('click', function () {
        $(this).hide();
        $(this).next().show();
    });
    $('.startn').mouseover(function () {
        $('.starty').each(function (index, obj) {
            $(obj).removeClass('starty');
            $(obj).addClass('startn');
        });
        $(this).removeClass('startn');
        $(this).addClass('starty');
        $(this).prevAll('label').each(function (index, obj) {
            $(obj).removeClass('startn');
            $(obj).addClass('starty');
        });
    });
    $('.appraisediv label').on('click', function () {
       alert("您打出了" + parseInt($(this).prevAll('label').length + 1) + "分的评价！");
    });
</script>