jquery星级评价代码 jquery五星好评

最近一直在认真的努力工作，今天工作完成得差不多了，比较轻松点，在工作中有遇到用jq实现五星好评功能，觉得简单又有用，所以空闲时间就想分享出来。

css部分：
<style>
            .u_star {
                padding: 0.8rem 0;
                margin-top: 2rem;
                display: block;
                zoom: 1;
            }
            
            .u_star span {
                display: inline-block;
                width: 1.8rem;
                height: 1.72rem;
                background: url("image/star.png") 0 -1.72rem no-repeat;
                background-size: 1.8rem auto;
                margin-right: 3%;
            }
            
            .u_star span.on {
                background: url("image/star.png") 0 0 no-repeat;
                background-size: 1.8rem auto;
            }
        </style>

html部分：
<div class="u_star">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>

jq部分：
<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
        <script>
            $(function() {
                var star = $('.u_star span');
                star.on('click', function() {
                    var len = $(this).index();
                    star.each(function(i, e) {
                        if(i <= len) {
                            $(this).addClass('on');
                        } else {
                            $(this).removeClass('on');
                        }
                    })

                });

            })
        </script>

所用到的图片也放在这里咯，希望能对一些需要的朋友有帮助。