请大佬指点，我不是很理解这个星星评分是怎么选中当前和前面的星星的，还有点击了星星移出如何保持点击状态不被移出状态清除。

Question

请大佬指点，我不是很理解这个星星评分是怎么选中当前和前面的星星的，还有点击了星星移出如何保持点击状态不被移出状态清除。百度文库评分html,body,p{margin:0;padding:0;}p{border:1pxsolid#eee;width:400px;margin:50pxauto;text-align:center;padding:10px0;}#comment{color:gray;margin-left:7px;}#rating{font-size:0;}#ratinga{margin:01px;}window.onload=function(){varoRating=document.getElementById('rating');varaA=oRating.getElementsByTagName('a');varoComment=document.getElementById('comment');vararrImg=['http://fantaghiro.github.io/miaov/JS_Basic_Lessons/7-img/nst.gif','http://fantaghiro.github.io/miaov/JS_Basic_Lessons/7-img/nsg.gif','http://fantaghiro.github.io/miaov/JS_Basic_Lessons/7-img/sth.gif','http://fantaghiro.github.io/miaov/JS_Basic_Lessons/7-img/st.gif'];varlastArrImg=[];varlastComment='　　';varnum=0;//switch判断functionrating(index,imgSrc){//移入当前a包括前面的一起选中for(vari=0;i

Answer 1

//鼠标移入
aA[i].onmouseover=function(){
num=this.index;
for(vari=0;ilastArrImg[i]=aA[i].getElementsByTagName('img')[0].src;
}
//初始化
rating(aA.length-1,arrImg[0]);
//判断num小于2显示图片1，否则显示图片2
if(num<2){
rating(num,arrImg[1]);
}else{
rating(num,arrImg[2]);
}
}
这里鼠标移入的时候获取了移入的元素下标num=this.index;
然后执行
functionrating(index,imgSrc){
//移入当前a包括前面的一起选中
for(vari=0;i<=index;i++){
aA[i].getElementsByTagName('img')[0].src=imgSrc;//每个i的第一个img
}
switch(index){//表达式index（通常是一个变量）的值会与结构中的每个case的值做比较
case0:
oComment.innerHTML='极差';
break;//使用break来阻止代码自动地向下一个case运行
case1:
oComment.innerHTML='很差';
break;
case2:
oComment.innerHTML='还行';
break;
case3:
oComment.innerHTML='不错';
break;
case4:
oComment.innerHTML='推荐';
}
}
让前面的星星选中
后面点击了后。
//点击
aA[i].onclick=function(){
num=this.index;
//初始化
rating(aA.length-1,arrImg[0]);
//判断num小于2显示图片1，否则显示图片3
if(num<2){
rating(num,arrImg[1]);
}else{
rating(num,arrImg[3]);
}
for(vari=0;ilastArrImg[i]=aA[i].getElementsByTagName('img')[0].src;
}
lastComment=oComment.innerHTML;
}
执行lastArrImg[i]=aA[i].getElementsByTagName('img')[0].src;把img的src写入了代码里所以点击完移除出不会发生改变
                            

Answer 2

百度文库viewcommon.js里：
initStar:function(){
vart=this
,e=null
,n=i(this.el).find("span.tip")
,o=this.$starEl.find(".value-star");
o.each(function(o,r){
vara=i(r);
a.hover(function(){
e&&clearTimeout(e),
n.hide(),
!t.commentStar&&t.setStar(o+1)
},function(){
!t.commentStar&&(e=setTimeout(function(){
t.setStar(0)
},50))
}),
a.click(function(){
t.commentStar||(t.commentStar=o+1,
s.starChange({
changed:{
star:t.commentStar
}
}),
t.setStar(t.commentStar))
})
})
},
setStar:function(t){
vare=this.$starEl.find(".value-star")
,n=this.$starEl.siblings(".f-star");
e.each(function(e,n){
t>e?i(n).removeClass("ic-star-off").addClass("ic-star-on"):i(n).addClass("ic-star-off").removeClass("ic-star-on")
}),
n.html(u[t])
},
resetStar:function(){
this.commentStar=0,
this.setStar(0)
},