实现评价页面添加星星数量

var num = finalnum = tempnum = 0;
        var lis = $(".star-box span");
        //num:传入点亮星星的个数
        //finalnum:最终点亮星星的个数
        //tempnum:一个中间值
        function fnShow(num) {
            finalnum = num || tempnum; //如果传入的num为0，则finalnum取tempnum的值
            for(var i = 0; i < lis.length; i++) {
                lis[i].className = i < finalnum ? "active" : ""; //点亮星星就是加class为light的样式
            }
        }
        for(var i = 1; i <= lis.length; i++) {
            lis[i - 1].index = i;
            lis[i - 1].onmouseover = function() { //鼠标经过点亮星星。
                fnShow(this.index); //传入的值为正，就是finalnum
            }
            lis[i - 1].onmouseout = function() { //鼠标离开时星星变暗
                fnShow(0); //传入值为0，finalnum为tempnum,初始为0
            }
            lis[i - 1].onclick = function() { //鼠标点击,同时会调用onmouseout,改变tempnum值点亮星星
                tempnum = this.index;
            }
        }

                            <div class="top">
                    <span class="title">满意度：</span>
                    <div class="star-box clearfix">
                        <span class="active"></span>
                        <span class="active"></span>
                        <span class="active"></span>
                        <span class="active"></span>
                        <span class="active"></span>
                    </div>
                </div>        

 

转载于:https://www.cnblogs.com/ouchen0312/p/7568448.html