一段评分的代码,基于jQuery

包含HTML、CSS、jQuery代码


    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <title>Document</title>
        <style>
            .pannel {
                background-color: white;
                border-radius: 3px;
                border: 1px solid;
                border-color: #e5e6e9 #dfe0e4 #d0d1d5;
            }

            .comment {
                padding: 0 60px 0 20px;
                margin-top: 20px;
            }

            .comment__title {
                color: #666666;
                font-size: 20px;
                margin: 30px 0;
            }

            .comment__item {
                display: flex;
                font-size: 16px;
                margin-bottom: 16px;
            }

            .comment__icon-k {
                color: #ff6363;
                margin-right: 4px;
            }

            .comment__v {
                margin-left: 10px;
            }

            .comment__star {
                display: inline-block;
                width: 20px;
                height: 20px;
                background: url(https://git.oschina.net/wisetc/century-nursemaid/raw/master/assets/img/user/icon-star.png) no-repeat;
            }

            .comment__star.comment__star--full {
                background-image: url(https://git.oschina.net/wisetc/century-nursemaid/raw/master/assets/img/user/icon-star-full.png);
            }

            .comment__input {
                width: 100%;
                height: 140px;
                resize: none;
                border-color: #e0e0e0;
            }

            .comment__input-wrap {
                text-align: center;
                margin-top: 50px;
                margin-bottom: 48px;
            }

            .comment__submit {
                display: inline-block;
                width: 200px;
                height: 50px;
                line-height: 50px;
                text-align: center;
                background-color: #ffb696;
                color: white;
                font-size: 20px;
                border: none;
                border-radius: 4px;
            }
        </style>
    </head>

    <body>

        <div class="comment pannel">
            <h4 class="comment__title">请填写您宝贵的建议</h4>
            <div class="comment__bd">
                <div class="comment__item-wrap">
                    <div class="comment__item"><span class="comment__k"><i class="comment__icon-k">*</i>综合评分</span>
                        <div class="comment__v" data-star-num="0"><span class="comment__star"></span><span class="comment__star"></span><span class="comment__star"></span>
                            <span class="comment__star"></span><span class="comment__star"></span></div>
                    </div>
                    <div class="comment__item"><span class="comment__k"><i class="comment__icon-k">*</i>技能评分</span>
                        <div class="comment__v" data-star-num="0"><span class="comment__star"></span><span class="comment__star"></span><span class="comment__star"></span>
                            <span class="comment__star"></span><span class="comment__star"></span></div>
                    </div>
                    <div class="comment__item"><span class="comment__k"><i class="comment__icon-k">*</i>态度评分</span>
                        <div class="comment__v" data-star-num="0"><span class="comment__star"></span><span class="comment__star"></span><span class="comment__star"></span>
                            <span class="comment__star"></span><span class="comment__star"></span></div>
                    </div>
                </div>
                <textarea class="comment__input" name="" cols="30" rows="10"></textarea>
                <div class="comment__input-wrap">
                    <input class="comment__submit" type="submit" value="提交" />
                </div>
            </div>
        </div>
        <script>
            $(function () {
                $('.comment__star').hover(
                    function () {
                        var filter = $(this).prevAll();
                        $(filter).add(this).addClass('comment__star--full');
                    },
                    function () {
                        var $parent = $(this).parent();
                        var className = 'comment__star--full';

                        var starNum = $parent.data('star-num');
                        var $origin = $parent.find('.comment__star:lt(' + starNum + ')');

                        // 恢复原状
                        $parent.find('.' + className).removeClass(className);
                        $origin.addClass(className);
                    }
                );

                $('.comment__star').click(function () {
                    var $parent = $(this).parent();
                    $parent.data('star-num', $(this).index() + 1);
                    $parent.data('pin', true);
                });
            });
        </script>
    </body>
    </html>

项目地址:https://git.oschina.net/wisetc/century-nursemaid