发新贴  快速回复

关于百度文库评分的问题,不知道后面怎么继续了

肥同小可
2014-11-10 22:02
 本帖最后由 肥同小可 于 2014-11-10 23:21 编辑 

关于百度文库评分的问题,不知道后面怎么继续了,现在已经做到了鼠标移动上去可以显示相应的评分了,但是点击过后,鼠标离开ul标签,不能固定点击的那个评分,请哪位帮忙
效果图:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
    body{ margin:0; padding:0;}
    ul,li,h1{ margin:0; padding:0; list-style:none}
    #div1{ width:650px; height:60px; margin:0 auto; line-height:60px; border:#666 dotted 1px}
    #div1 span{ color:#F00; float:left}
    #div1 h1{ font-size:16px; float:left}
    #div1 ul { float:left;}
    #div1 ul li{ float:left; width:30px; height:31px; background:url(images/s1.gif) ; margin-top:10px; margin-left:6px; display:inline; cursor:pointer }
    #div1 ul .active{ background:url(images/s2.gif) ;}
    #div1 ul .hactive{ background:url(images/s3.gif) ;}
    .ts{ width:326px; height:60px; background:url(images/bgs.jpg) no-repeat; float:left; margin-left:10px; display:inline}
    .s{ display:none; float:left; color:#F60; font-weight:bold; font-size:16px; margin-left:10px; display:inline}
</style>
<script>
    window.err==function(){
        var oDiv=document.getElementById("div1");
        var oUl=oDiv.getElementsByTagName("ul")[0];
        var aLi=oUl.getElementsByTagName("li");
        var aDiv=oDiv.getElementsByTagName("div");
        //很差  较差 还行 推荐 力荐
        var arrText=['很差','较差','还行','推荐','力荐'];
    
        //给li增加行为
        for(var i=0;i<aLi.length;i++){
            aLi[i].index=i;
            aLi[i].err==function(){
                aDiv[0].style.display='none';
                aDiv[1].style.display='block'
                aDiv[1].innerHTML=arrText[this.index];
                for(var i=0;i<5;i++){
                    aLi[i].className=''
                }
                if(this.index==0 || this.index==1)
                {
                    for(var j=0;j<this.index+1;j++){
                        aLi[j].className='hactive'
                    }    
                }else{
                    for(var j=0;j<this.index+1;j++){
                        aLi[j].className='active'
                    }
                }
            }
            aLi[i].err==function(){
            aDiv[0].style.display="block"
            aDiv[1].style.display='none';
            for(var i=0;i<5;i++){
                    aLi[i].className=''
                }
            }
            aLi[i].err==function(){
            aDiv[0].style.display='none'
            aDiv[1].style.display='block'
            aDiv[1].innerHTML=arrText[this.index];
            }
        }
        
    }
</script>
</head>

<body>
<div id="div1">
    <span>*</span><h1>总体评价:</h1>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div class="ts">
        
    </div>
    <div class="s">
        
    </div>
</div>
</body>
</html>

 
leo
供参考:


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
span { width:100px; height:100px; border:1px solid #333; background:#f1f1f1; float:left; }
.bg1 { background:gray; }
.bg2 { background:yellow; }
</style>
</head>

<body>

<span></span>
<span></span>
<span></span>
<span></span>
<span></span>

<script>
var aSpan = document.getElementsByTagName('span');
var iNow = -10;

for (var i=0; i<aSpan.length; i++) {
    aSpan[i].index = i;
    aSpan[i].err= = function () {
        fnClear();
        
        for (var i=0; i<=this.index; i++) {
            if ( this.index < 2 ) {
                aSpan[i].className = 'bg1';
            }
            else {
                aSpan[i].className = 'bg2';
            }
        }
    };
    aSpan[i].err= = function () {
        fnClear();
        for (var i=0; i<=iNow; i++) {
            if ( iNow < 2 ) {
                aSpan[i].className = 'bg1';
            }
            else {
                aSpan[i].className = 'bg2';
            }
        }
    };
    aSpan[i].err= = function () {
        iNow = this.index;
    };
}

function fnClear () {
    for (var i=0; i<aSpan.length; i++) {
        aSpan[i].className = '';
    }
}
</script>

</body>
</html>


2014-11-10 23:28  回复本帖
肥同小可
forum.php?mod=redirect&goto=findpost&pid=32005&ptid=10121
供参考:

伟哥,帮忙看下,点上去那个星星可以了但是后面的那两个层始终只出现第一个,帮忙看下,谢谢了!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
    body{ margin:0; padding:0;}
    ul,li,h1{ margin:0; padding:0; list-style:none}
    #div1{ width:650px; height:60px; margin:0 auto; line-height:60px; border:#666 dotted 1px}
    #div1 span{ color:#F00; float:left}
    #div1 h1{ font-size:16px; float:left}
    #div1 ul { float:left;}
    #div1 ul li{ float:left; width:30px; height:31px; background:url(images/s1.gif) ; margin-top:10px; margin-left:6px; display:inline; cursor:pointer }
    .ts{ width:326px; height:60px; background:url(images/bgs.jpg) no-repeat; float:left; margin-left:10px; display:inline}
    .s{ display:none; float:left; color:#F60; font-weight:bold; font-size:16px; margin-left:10px; display:inline}
    #div1 ul .active{ background:url(images/s2.gif)}
    #div1 ul .hactive{ background:url(images/s3.gif)}
</style>
<script>
    window.err==function(){
        var oDiv=document.getElementById("div1");
        var oUl=oDiv.getElementsByTagName("ul")[0];
        var aLi=oUl.getElementsByTagName("li");
        var aDiv=oDiv.getElementsByTagName("div");
        var isStar=-1;
        //很差  较差 还行 推荐 力荐
        var arrText=['很差','较差','还行','推荐','力荐'];
        for(var i=0;i<aLi.length;i++){
          aLi[i].index=i
          aLi[i].err==function(){
          fnClear();
          aDiv[0].style.display='none';
          aDiv[1].style.display='block'
          for(var i=0;i<=this.index;i++){
              if(this.index<2){
                 aLi[i].className="hactive"
              }
              else{
                 aLi[i].className="active" 
              }
            }
             aDiv[1].innerHTML=arrText[this.index];

          }
          //鼠标离开
          aLi[i].err==function(){
           fnClear();
           aDiv[0].style.display='block';
           aDiv[1].style.display='none';
           for(var i=0;i<=isStar;i++){
              if(this.index<2){
                 aLi[i].className="hactive"
              }
              else{
                 aLi[i].className="active" 
              }
            }
          }
          aLi[i].err==function(){
            isStar=this.index;
            aDiv[0].style.display='none';
            aDiv[1].style.display='block';
            aDiv[1].innerHTML=arrText[this.index];
          }
        }
    }
function fnClear(){
var oDiv=document.getElementById("div1");
var oUl=oDiv.getElementsByTagName("ul")[0];
var aLi=oUl.getElementsByTagName("li");
 for(var i=0;i<aLi.length;i++){
    aLi[i].className=''; 
 }
}
</script>
</head>

<body>
<div id="div1">
    <span>*</span><h1>总体评价:</h1>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div class="ts">
        
    </div>
    <div class="s">
        
    </div>
</div>
</body>
</html>


2014-11-11 09:03  回复本帖
 
leo
forum.php?mod=redirect&goto=findpost&pid=32007&ptid=10121
伟哥,帮忙看下,点上去那个星星可以了但是后面的那两个层始终只出现第一个,帮忙看下,谢谢了!




你想让后面的两个层出来,那你得设置它显示呀,你设置的是一个显示,一个隐藏,当然出不来呀:
aDiv[0].style.display='none';
aDiv[1].style.display='block'

2014-11-11 09:25  回复本帖
肥同小可
forum.php?mod=redirect&goto=findpost&pid=32008&ptid=10121
你想让后面的两个层出来,那你得设置它显示呀,你设置的是一个显示,一个隐藏,当然出不来呀:
aDiv[0].s ...

恩 ,放在for循环里面就可以了,但是又有问题了,哎,第一次评分后很好,如果我评选的第一个,那么我下次鼠标移动上第三个的时候,三个都是黄色的(正常),但是移开后,第一个是黄色的了,而不是灰色的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
    body{ margin:0; padding:0;}
    ul,li,h1{ margin:0; padding:0; list-style:none}
    #div1{ width:650px; height:60px; margin:0 auto; line-height:60px; border:#666 dotted 1px}
    #div1 span{ color:#F00; float:left}
    #div1 h1{ font-size:16px; float:left}
    #div1 ul { float:left;}
    #div1 ul li{ float:left; width:30px; height:31px; background:url(images/s1.gif) ; margin-top:10px; margin-left:6px; display:inline; cursor:pointer }
    .ts{ width:326px; height:60px; background:url(images/bgs.jpg) no-repeat; float:left; margin-left:10px; display:inline}
    .s{ display:none; float:left; color:#F60; font-weight:bold; font-size:16px; margin-left:10px; display:inline}
    #div1 ul .active{ background:url(images/s2.gif)}
    #div1 ul .hactive{ background:url(images/s3.gif)}
</style>
<script>
    window.err==function(){
        var oDiv=document.getElementById("div1");
        var oUl=oDiv.getElementsByTagName("ul")[0];
        var aLi=oUl.getElementsByTagName("li");
        var aDiv=oDiv.getElementsByTagName("div");
        var isStar=-1;
        //很差  较差 还行 推荐 力荐
        var arrText=['很差','较差','还行','推荐','力荐'];
        for(var i=0;i<aLi.length;i++){
          aLi[i].index=i
          aLi[i].err==function(){
          fnClear();
          aDiv[0].style.display='none';
          aDiv[1].style.display='block'
          for(var i=0;i<=this.index;i++){
              if(this.index<2){
                 aLi[i].className="hactive"
              }
              else{
                 aLi[i].className="active" 
              }
            }
             aDiv[1].innerHTML=arrText[this.index];
          };
          //鼠标离开
          aLi[i].err==function(){
           fnClear();
           aDiv[0].style.display='block';
           aDiv[1].style.display='none';
           for(var i=0;i<=isStar;i++){
              if(this.index<2){
                 aLi[i].className="hactive"
              }
              else{
                 aLi[i].className="active" 
              }
              aDiv[0].style.display='none';
              aDiv[1].style.display='block';
            }
          }
          aLi[i].err==function(){
            isStar=this.index;
            aDiv[1].innerHTML=arrText[this.index];
          }
        }
    }
function fnClear(){
var oDiv=document.getElementById("div1");
var oUl=oDiv.getElementsByTagName("ul")[0];
var aLi=oUl.getElementsByTagName("li");
 for(var i=0;i<aLi.length;i++){
    aLi[i].className=''; 
 }
}
</script>
</head>

<body>
<div id="div1">
    <span>*</span><h1>总体评价:</h1>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div class="ts">
        
    </div>
    <div class="s">
        
    </div>
</div>
</body>
</html>


2014-11-11 09:31  回复本帖
肥同小可
伟哥 问题解决了!谢谢了!
2014-11-11 09:42  回复本帖
徐斌4599
forum.php?mod=redirect&goto=findpost&pid=32008&ptid=10121
你想让后面的两个层出来,那你得设置它显示呀,你设置的是一个显示,一个隐藏,当然出不来呀:
aDiv[0].s ...

真的是看不懂这个代码

 aSpan[i].err= = function () {
            
         for (var i=0; i<aSpan.length; i++) {
                aSpan[i].className = '';
        }
                for (var i=0; i<=iNow; i++) {
                        if ( iNow < 2 ) {
                                aSpan[i].className = 'bg1';
                        }
                        else {
                                aSpan[i].className = 'bg2';
                        }
                }
        };
都out离开了 为什么还循环判断啊  直接不显示就完事了呗

 aSpan[i].err= = function () {
                iNow = this.index;
        };
这个是什么意思啊 为什么iNow等于几 几就显示了啊 为什么啊

2014-12-22 14:25  回复本帖
莫涛
forum.php?mod=redirect&goto=findpost&pid=34081&ptid=10121
真的是看不懂这个代码

 aSpan.err= = function () {


这个其实都是相关联的,移除的时候要分两种情况看,一种是用户没有点击操作过,那就直接消失了,一种是用户进行过点击,那点击按钮之前的星星不应该消失,所以加了个循环,但是要注意循环的结束条件是iNow,也就是我们点击的是第几个span。所以只是循环到我们点击的span加上背景。文字不太好描述,我记得js第二章的视频里边有,你可以在里边找一下
2014-12-23 22:03  回复本帖
徐斌4599
forum.php?mod=redirect&goto=findpost&pid=34139&ptid=10121
这个其实都是相关联的,移除的时候要分两种情况看,一种是用户没有点击操作过,那就直接消失了,一种是用 ...

谢谢老师,已经搞懂了
2014-12-24 16:47  回复本帖
lfw1995
forum.php?mod=redirect&goto=findpost&pid=32005&ptid=10121
供参考:

var iNow = -10;
aSpan[i].err= = function () {
                fnClear();
                for (var i=0; i<=iNow; i++) {
                        if ( iNow < 2 ) {
                                aSpan[i].className = 'bg1';
                        }
                        else {
                                aSpan[i].className = 'bg2';
                        }
                }
        };
        aSpan[i].err= = function () {
                iNow = this.index;
        };
}这里的var iNow = -10;然后循环i<=iNow;这不是逻辑有问题??
2016-04-22 13:33  回复本帖
登录 后才可以发表回复