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>

所用到的圖片也放在這裏咯，但願能對一些須要的朋友有幫助。