js 写个 星级评分 可以多个评分项 并自定义星星数

模仿网站实现的多个星级评分

---

思路

点击事件 委托父级
数组分割 成多个评分项 （如最高5分 有三个评分项 就分三个数组）
点击 星星 实现 该星星归属项的评分
返回 评分项数组

---

效果图 （21世纪抽象分格 7颗星 评分）

html 结构

			<div class="stars-wrapper">
			    //评分项1
                            <div class="stars">
                                <span>1</span>
                                <span>2</span>
                                <span>3</span>
                                <span>4</span>
                                <span>5</span>
                                <span>6</span>
                                <span>7</span>
                            </div>
                            //评分项2
                            <div class="stars">
                                <span >1</span>
                                <span>2</span>
                                <span>3</span>
                                <span>4</span>
                                <span>5</span>
                                <span>6</span>
                                <span>7</span>
                            </div>
                            //评分项3
                            <div class="stars">
                                <span >1</span>
                                <span>2</span>
                                <span>3</span>
                                <span>4</span>
                                <span>5</span>
                                <span>6</span>
                                <span>7</span>
                            </div>
                        </div>

css 部分 （21世纪抽象派分格）

 .stars{
        background: yellowgreen;
        padding: 5px;
        margin-bottom: 10px;
    }
    .stars span{
        display: inline-block;
        width: 20px;
        height: 20px;
        background: #ccc;
        margin-right: 10px;
    }
    /* 显示评分数 */
    span.active{
        background: red;
    }

js

window.onload = function(){
	stars(7) //  满分 7 分 根据 html 自定义星星数
}
function stars(size){
        //获取总的星星数
        var stars = document.querySelectorAll('.stars> span')
        // 得分数组
        var scores=[]
        // 评分项数组
        var starArrs = []
        //数组分割
        for(var i = 0; i<Math.ceil(stars.length/size);i++ ){
            var start = i*size
            var end = start+size
            //初始评分为0
            scores.push(0)
            starArrs.push([].slice.call(stars,start,end))
        }
        // 事件委托父元素
        document.querySelector('.stars-wrapper').onclick = function(e){
            //获取点击的星星 在 总数组中的index
            var index = [].indexOf.call(stars,e.target)
            // 如果点击的 不是星星 
            if(index===-1) return
            // 判断 该星星归属 评分项数组
            var i = parseInt(index/size)
            var starArr =starArrs[ i ]
             // 计算归属评分项 的评分
             index = index%size
             // 评分未更改
             if(index ===( scores[ i ] - 1)){
             	console.log(scores)
             	 return scores
            }
            scores[ i ] =  index+1
            
               //显示评分红色托马斯基柴夫波娃效果
            starArr.forEach(function(star,i){
                if(i<= index){
                    star.classList.toggle('active',true)
                }else{
                    star.classList.toggle('active',false)
                }
            })
            console.log(scores)
            return scores
        }
    }
// 数组分割 可以自定义成一个函数
  function arrayChunck(arr,size){
        if(!arr.length) return
        var arrs = []
        for(var i=0; i< Math.ceil(arr.length/7);i++){
            var start = i*size
            var end = start+size
            arrs.push([].slice.call(arr,start,end))
        }
        return arrs
    }

---

思考下 做一个整合展示评分的功能 把评分数组 各项评分展示