jquery星级评分

最新推荐文章于 2024-08-14 02:14:47 发布

Glorydgr

最新推荐文章于 2024-08-14 02:14:47 发布

阅读量579

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_19879511/article/details/104989301

版权

笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<style>
    /* 星星评价打分 */
    .star_box {
        margin: 0.1rem;
        background: #fff;
        height: 2rem;
        border-radius: 0.1rem;
    }

    .star_box p {
        font-size: 0.2rem;
        color: #231815;
        text-align: center;
        font-weight: bold;
        line-height: 1rem;
    }

    .appr_start {
        width: 80%;
        display: flex;
        /*flex-direction: row;*/
        align-items: center;
        /*justify-content: center;*/
    }

    .appr_start span {
          width: 2rem;
    height: 1.54rem;
        background: url(/img/icon_astar.png) no-repeat center;
        background-size: 100% 100%;
        margin-right: 0.24rem;
    }

    .appr_start span.on {
        background: url(/img/icon_star.png) no-repeat center;
        background-size: 100% 100%;
    }

    .appr_start em {
        font-size: 0.24rem;
        color: #666666;
    }
</style>

            <div class="row cl ml-5 mt-10">
                <label class="form-label col-xs-2 col-sm-2"><span class="c-red">*</span>星级评价：</label>
                <div class="star_box">

                    @*<p><h4>星级评价</h4></p>*@
                    <div class="appr_start">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <em></em>
                    </div>
                </div>
            </div>

 //星星评分
    $(function () {       // 小星星
        $(".appr_start span").click(function () {
            $(this).addClass("on");
            $(this).prevAll().addClass("on");
            $(this).nextAll().removeClass("on");
            var sta_index = $(this).index();
            switch (sta_index) {
                case 0:
                    $(this).siblings("em").html('非常差');
                    $("#Score").val(0 + 1);
                    break;
                case 1:
                    $(this).siblings("em").html('差');
                    $("#Score").val(1 + 1);
                    break;
                case 2:
                    $(this).siblings("em").html('一般');
                    $("#Score").val(2 + 1);
                    break;
                case 3:
                    $(this).siblings("em").html('好');
                    $("#Score").val(3 + 1);
                    break;
                case 4:
                    $(this).siblings("em").html('非常好');
                    $("#Score").val(4 + 1);
                    break;
                default:
                    $(this).siblings("em").html('非常差');
                    $("#Score").val(0 + 1);
            }
            //if (sta_index == 0) {
            //    $(this).siblings("em").html('非常差');
            //} else if (sta_index == 1) {
            //    $(this).siblings("em").html('差');
            //} else if (sta_index == 2) {
            //    $(this).siblings("em").html('一般');
            //} else if (sta_index == 3) {
            //    $(this).siblings("em").html('好');
            //} else if (sta_index == 4) {
            //    $(this).siblings("em").html('非常好');
            //}
            //$("#Score").val(sta_index);
        })

    })