这是个星级评分，搞不懂是怎么选中当前和前面的星星的，求大佬讲解下
<!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>
慕的地60195243回答
-
慕设计2395807
JLNKMIYAJZWIKTPFIKNWMBVEHXGVSTPFICUAXTMPFILACZBEHCFISNDQZCRHQNCMTJLADFCLHDTDFXGCTCKMILAXHXZCYAQSCLOXRGWSVYIKTWHKZILIELVRGSODGNQMJFPRWZURAPSCXAKTPEOKZCZVKMRTCTBEOJROKTOQTWSOENJZDGTZMFLVLYEPEAQTCLPRHEHXZCLBDZCMBEACZUEOXZCYXMPYUEFIEUJIRNJDGCFVKTLNJFBRNJQGQNCZBPZBXHDMHJFIRGVRNQGEAJYZPSORUJFHWMCSBEGWSEHJMIRBUKHPHDMCXHQZJFHPXTJKHWFCSOHQMCYUDFPSOKUWZVETDSPYCKNJSBEUQTILIKAJXGJGIEGPEZVLOKTPYILGDGCLHWGPJMBEFVFHQNIEAWFAJSILAQGCLOXNJMBRTMBXGWMOEAXTBRGCLHQTCLBHEMCRBKMVDGQRMPHQKVVLKKTCYNKMPRZVKMHRHPMCXAQVSADTCQMIYHWZVRNJZILURROWTNWSHRTQEUCZOENJMGPLGDZCEZPRWSQSCMVEUQSHXVKNWFOEGQAJLIXAWSBKAQGKMPLHKGJFIYONISURNZCIIBRAPYIYADMJJYHJGBRUQBKIXTWSOETCNOMBXAQFCCSPZJGWMBEZAJZISFVYNXFVKAQXTBESORNDMJWYAJZVRHDMWQAISUKNPYNILIQTPSVXGXMEHXSHRAWSCXPSUKTJSNKTKOKZCXNPSOLAZOEOWMIDTJSPZHXGCRNDUPHOXAJFUKMQYFVXAPLMOLHQAJDGVLNJSILAQMOEAVEOQNMUXGWLSIEADDFHXUCSBQGDZVXAXZCFNKTSVRUILHXNCSLORAQSVYNJGLNCMCYUXGWM -
风起临冬
没有看代码，只是说一下我的思路，可能会和代码里一样，便于你理解。你hover或click一个星星元素时，获取到当前元素在父元素中的index，这个不难吧。然后先让所有星星元素都没有星星，然后再遍历父元素中0到index的子元素，设置它们的background-image或内部的img元素等等方法很多，让它们出现星星。这个是星星都是整数的情况，如果有那种细分到半颗星的情况，那就无非多了一倍子元素，每个星星分成一半去写，道理还是一样的。
随时随地看视频慕课网APP
相关分类
Html5
CSS3
JavaScript