首页猿问这是个星级评分，搞不懂是怎么选中当...

这是个星级评分，搞不懂是怎么选中当前和前面的星星的，求大佬讲解下

Html5 CSS3 JavaScript

慕的地6019524 2019-03-08 12:01:58

<!DOCTYPE html><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>百度文库评分</title> <style> html,body,p {margin: 0;padding: 0; } p {border: 1px solid #eee;width: 400px;margin: 50px auto;text-align: center;padding: 10px 0;} #comment {color: gray;margin-left: 7px;} #rating {font-size: 0;} #rating a {margin: 0 1px;} </style> <script> window.onload = function () { var oRating = document.getElementById('rating'), //获取id为rating的span aA = oRating.getElementsByTagName('a'), //获取span中的a oComment = document.getElementById('comment'), //获取id为comment的span arrImg = ['img/nst.gif', 'img/nsg.gif', 'img/sth.gif', 'img/st.gif'], //获取星星图片数组 lastArrImg = [], //获取空数组 lastComment = '    ', //获取空字符 num = 0; function rating(index, imgSrc) { //index数量 imgSrc图片 for (var i = 0; i <= index; i++) { aA[i].getElementsByTagName('img')[0].src = imgSrc; //每个i的第一个img } switch (index) { case 0: //判断index数字为0时显示极差 oComment.innerHTML = '极差'; break; case 1: oComment.innerHTML = '很差'; break; case 2: oComment.innerHTML = '还行'; break; case 3: oComment.innerHTML = '不错'; break; case 4: oComment.innerHTML = '推荐'; } } for (var i = 0; i < aA.length; i++) { aA[i].index = i; aA[i].onmouseover = function () { num = this.index; for (var i = 0; i < aA.length; i++) { lastArrImg[i] = aA[i].getElementsByTagName('img')[0].src; } rating(aA.length - 1, arrImg[0]); if (num < 2) { rating(num, arrImg[1]); } else { rating(num, arrImg[2]); } } aA[i].onmouseout = function () { for (var i = 0; i < aA.length; i++) { aA[i].getElementsByTagName('img')[0].src = lastArrImg[i]; } oComment.innerHTML = lastComment; } aA[i].onclick = function () { num = this.index; rating(aA.length - 1, arrImg[0]); if (num < 2) { rating(num, arrImg[1]); } else { rating(num, arrImg[3]); } for (var i = 0; i < aA.length; i++) { lastArrImg[i] = aA[i].getElementsByTagName('img')[0].src; } lastComment = oComment.innerHTML; } } } </script></head><body> <p> 我的评价： <span id="rating"> <a href="javascript:"><img src="img/st.gif" alt=""></a> <a href="javascript:"><img src="img/st.gif" alt=""></a> <a href="javascript:"><img src="img/st.gif" alt=""></a> <a href="javascript:"><img src="img/st.gif" alt=""></a> <a href="javascript:"><img src="img/st.gif" alt=""></a> </span> <span id="comment">推荐</span> </p></body></html>

查看完整描述