一个JS小问题

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>DIY后台评分功能</title>
<style type="text/css">
*{margin:0;padding:0;}
li{list-style-type:none;}
#rank ul li{width:100px;height:20px;border:1px solid #ccc;float:left;margin:0 10px;}
#rank ul li.active{background:#0066cc;}
</style>
<script type="text/javascript">
window.onload=function(){
var data=['差','一般','好评','力荐','特优']
var odiv=document.getElementById('rank');
var ali=odiv.getElementsByTagName('li');
var op=odiv.getElementsByTagName('p')[0];
for (i=0;i<ali.length;i++){
ali[i].index=i;
ali[i].onmouseover=function(){
op.style.display='block';
op.innerHTML=data[this.index];
for(i=0;i<this.index+1;i++){
ali[i].className='active';
}
}
ali[i].onmouseout=function(){
op.style.display='';
for(i=0;i<ali.length;i++){
ali[i].className='';
}
}
ali[i].onclick=function(){
for(i=0;i<ali.length;i++){
alert('当前评分为'+[this.index+1]+'分');
}
}
}
}</script></head>
<body>
<div id="rank">
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<p>一般</p></div>
</body>
</html>当鼠标移出第三个的时候，，希望第三个（含第三个）之前的全亮着，依次类推，怎么做啊
谢谢了

解决方案 »

  1.   

    <!doctype html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="utf-8" />
    <title>DIY后台评分功能</title>
    <style type="text/css">
    *{margin:0;padding:0;}
    li{list-style-type:none;}
    #rank ul li{width:100px;height:20px;border:1px solid #ccc;float:left;margin:0 10px;}
    #rank ul li.active{background:#0066cc;}
    </style>
    <script type="text/javascript">
    window.onload=function(){
    var data=['差','一般','好评','力荐','特优']
    var odiv=document.getElementById('rank');
    var ali=odiv.getElementsByTagName('li');
    var op=odiv.getElementsByTagName('p')[0];
        for (i=0;i<ali.length;i++){
            ali[i].index=i;
            ali[i].onmouseover=function(){
                op.style.display='';
                for(i=0;i<ali.length;i++){
                ali[i].className='';    
                }
                op.style.display='block';
                op.innerHTML=data[this.index];
                for(i=0;i<this.index+1;i++){
                    ali[i].className='active';
                }
            }
            ali[i].onmouseout=function(){
            }
            ali[i].onclick=function(){
            for(i=0;i<ali.length;i++){
                alert('当前评分为'+[this.index+1]+'分');
                }
            }
        }
    }</script></head>
    <body>
    <div id="rank">
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
            <p>一般</p></div>
    </body>
    </html>把OUT的代码写到move之前就可以了
      

  2.   


    <!doctype html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="utf-8" />
    <title>DIY后台评分功能</title>
    <style type="text/css">
    *{margin:0;padding:0;}
    li{list-style-type:none;}
    #rank ul li{width:100px;height:20px;border:1px solid #ccc;float:left;margin:0 10px;}
    #rank ul li.active{background:#0066cc;}
    </style>
    <script type="text/javascript">
    window.onload=function(){
    var data=['差','一般','好评','力荐','特优']
    var odiv=document.getElementById('rank');
    var ali=odiv.getElementsByTagName('li');
    var op=odiv.getElementsByTagName('p')[0];
        for (i=0;i<ali.length;i++){
            ali[i].index=i;
            ali[i].onmouseover=function(){
                op.style.display='block';
                op.innerHTML=data[this.index];
                for(i=0;i<this.index+1;i++){
                    ali[i].className='active';
                }
            }
            ali[i].onmouseout=function(){
                op.style.display='';
                for(j=0;j<i;j++){
                ali[j].className='active';    
                }
            }
            ali[i].onclick=function(){
            for(i=0;i<ali.length;i++){
                alert('当前评分为'+[this.index+1]+'分');
                }
            }
        }
    }</script></head>
    <body>
    <div id="rank">
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
            <p>一般</p></div>
    </body>
    </html>
    楼主是这意思？
      

  3.   


    <!doctype html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="gbk" />
    <title>DIY后台评分功能</title>
    <style type="text/css">
    *{margin:0;padding:0;}
    li{list-style-type:none;}
    #rank ul li{width:100px;height:20px;border:1px solid #ccc;float:left;margin:0 10px;}
    #rank ul li.active{background:#0066cc;}
    </style>
    <script type="text/javascript">
    window.onload=function(){
    var data=['差','一般','好评','力荐','特优']
    var odiv=document.getElementById('rank');
    var ali=odiv.getElementsByTagName('li');
    var op=odiv.getElementsByTagName('p')[0];
        for (i=0;i<ali.length;i++){
            ali[i].index=i;
            ali[i].onmouseover=function(){
                op.style.display='block';
                op.innerHTML=data[this.index];
    for(x=0;x<data.length;x++){
                    ali[x].className='';
                }
                for(k=0;k<this.index+1;k++){
                    ali[k].className='active';
                }
            }
            ali[i].onmouseout=function(){
                op.style.display='';
                for(j=0;j<this.index+1;j++){
                ali[j].className='active';    
                }
            }
            ali[i].onclick=function(){
            for(i=0;i<ali.length;i++){
                alert('当前评分为'+[this.index+1]+'分');
                }
            }
        }
    }</script></head>
    <body>
    <div id="rank">
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
            <p>一般</p></div>
    </body>
    </html>
    指到3，1、2、3就全亮，以此类推。
    往回移，也是一样。
    在 onmouseover 中 增加了一句更改所有li的class，即可实现
    最后那个 onclick 打分，不了解为何要循环，所以没有做修改。