原生js多组星级评价 所需图片htmldiv classstarLevel ul classstars li classlight star1a hrefjavascript:;1/a/li li classstar1a hrefjavascript:;2/a/li li classstar1a hrefjavascript:;3/a/li li classstar1a hrefjavascript:;4/a/li li classstar1a hrefjavascript:;5/a/li /ul ul classstars li classlight star2a hrefjavascript:;1/a/li li classstar2a hrefjavascript:;2/a/li li classstar2a hrefjavascript:;3/a/li li classstar2a hrefjavascript:;4/a/li li classstar2a hrefjavascript:;5/a/li /ul ul classstars li classlight star3a hrefjavascript:;1/a/li li classstar3a hrefjavascript:;2/a/li li classstar3a hrefjavascript:;3/a/li li classstar3a hrefjavascript:;4/a/li li classstar3a hrefjavascript:;5/a/li /ul /divjs遗留问题无法用一个函数实现三组评分//打星星 var num1 finalNum1 tempNum1 0; var lis1 document.getElementsByClassName(star1); //num:传入点亮星星的个数 //finalNum:最终点亮星星的个数 //tempNum:一个中间值 function fnShow(num1) { finalNum1 num1 || tempNum1;//如果传入的num为0则finalNum取tempNum的值 for (var i 0; i lis1.length; i) { if(i finalNum1){ lis1[i].className light ; } else{ lis1[i].className star1; }//点亮星星就是加class为light的样式 } } for (var i 1; i lis1.length; i) { lis1[i - 1].index i; lis1[i - 1].onmouseover function() { //鼠标经过点亮星星。 fnShow(this.index);//传入的值为正就是finalNum } lis1[i - 1].onmouseout function() { //鼠标离开时星星变暗 fnShow(0);//传入值为0finalNum为tempNum,初始为0 } lis1[i - 1].onclick function() { //鼠标点击,同时会调用onmouseout,改变tempnum值点亮星星 tempNum1 this.index; } } var num2 finalNum2 tempNum2 0; var lis2 document.getElementsByClassName(star2); //num:传入点亮星星的个数 //finalNum:最终点亮星星的个数 //tempNum:一个中间值 function fnShow2(num2) { finalNum2 num2 || tempNum2;//如果传入的num为0则finalNum取tempNum的值 for (var i 0; i lis2.length; i) { if(i finalNum2){ lis2[i].className light ; } else{ lis2[i].className star2; }//点亮星星就是加class为light的样式 } } for (var i 1; i lis2.length; i) { lis2[i - 1].index i; lis2[i - 1].onmouseover function() { //鼠标经过点亮星星。 fnShow2(this.index);//传入的值为正就是finalNum } lis2[i - 1].onmouseout function() { //鼠标离开时星星变暗 fnShow2(0);//传入值为0finalNum为tempNum,初始为0 } lis2[i - 1].onclick function() { //鼠标点击,同时会调用onmouseout,改变tempnum值点亮星星 tempNum2 this.index; } } var num3 finalNum3 tempNum3 0; var lis3 document.getElementsByClassName(star3); //num:传入点亮星星的个数 //finalNum:最终点亮星星的个数 //tempNum:一个中间值 function fnShow3(num3) { finalNum3 num3 || tempNum3;//如果传入的num为0则finalNum取tempNum的值 for (var i 0; i lis3.length; i) { if(i finalNum3){ lis3[i].className light ; } else{ lis3[i].className star3; }//点亮星星就是加class为light的样式 } } for (var i 1; i lis3.length; i) { lis3[i - 1].index i; lis3[i - 1].onmouseover function() { //鼠标经过点亮星星。 fnShow3(this.index);//传入的值为正就是finalNum } lis3[i - 1].onmouseout function() { //鼠标离开时星星变暗 fnShow3(0);//传入值为0finalNum为tempNum,初始为0 } lis3[i - 1].onclick function() { //鼠标点击,同时会调用onmouseout,改变tempnum值点亮星星 tempNum3 this.index; } } }