首页新闻找找看学习计划

为什么我的问卷代码只显示第一个结果

0
悬赏园豆:100 [已解决问题] 解决于 2016-06-25 16:02
<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>女性健康疾病自测问卷</title>

<style type="text/css">
    /* Download  */
body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, table, td, th, form, fieldset, img, dl, dt, dd {
    margin: 0px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
}

a {
    color: #35679a;
    text-decoration: none;
}

a:hover {
    color: #c00;
    text-decoration: underline;
}

img {
    border: none;
}

li {
    list-style: none;
}

body {
    text-align: left;
    background: #f0f0f0;
    font-size: 12px;
    color: #1d70eb;
}

.main {
    width: 85%;
    border: solid #ddd;
    border-radius: 10px;
    background: #fff;
    margin: 0 auto;
    padding: 20px 0;
    border-width: 0 1px;
}
h2{
    padding-left: 7.5%;
    margin: 20px auto;
    font-size: 30px;

}

.warp {
    width:80%;
    height: 420px;
    background: #fff;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
    border-radius: 10px;
}

.issue {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 99;
}

.issue div {
    height: 387px;
    padding-bottom: 33px;
    background: #fff;
}

.issue h3 {
    line-height: 2em;
    color: #1348c1;
    padding: 4em .5em .1em;
    border-bottom: 1px solid #8aadfd;
    font-weight: 100;
}

.issue ul {
    padding: 4px 10px;
}

.issue li {
    margin-bottom: 3px;
    line-height: 24px;
    min-height: 24px;
    padding: 1px 0 4px;
    border: none;
    outline: none;
}

.issue li:hover,
.issue li.hover {
    background: #feffff;
}

.issue li input {
    display: none;
}

.issue li span {
    float: left;
    clear: left;
    width: 22px;
    height: 22px;
    overflow: hidden;
    margin: 3px 3px 0 0;
    background: url(img/bg.png) 0 0 no-repeat;
}

.issue li:hover span,
.issue li.hover span {
    background: url(img/bg.png) 0 -22px no-repeat;
}

.issue li label {
    color: #555;
    font-size: 12px;
    margin-top: 3px;
}

.issue div.selected {
    background: #fdfeff;
}

.issue div.selected li {
    border: 1px solid #fdfeff;
}

.issue div.selected li:hover,
.issue div.selected li.hover {
    background: none;
    border: 1px solid #fdfeff;
}

.issue div.selected li:hover span,
.issue div.selected li.hover span {
    background: url(img/bg.png) 0 0 no-repeat;
}

.issue div.selected li.sel {
    border: 1px solid #f1f1f1;
}

.issue li.sel span,
.issue div.selected li.sel:hover span {
    background: url(img/bg.png) 0 -44px no-repeat;
}



.issue div.result p {
    line-height: 20px;
    padding: 0 16px;
    text-indent: 2em;
    margin-top: 4px;
}

.ctrl {
    height: 32px;
    position: absolute;
    z-index: 100;
    margin-left: 9%;
}



.btns span {
    float: left;
    width: 22px;
    height: 24px;
    margin: 4px 3px;
    display: inline;
    text-indent: -10000px;
    cursor: pointer;
}

.prog {
    position: relative;
    width: 100%;
    float: right;
    height: 0;
    background: #fff;
    display: inline;
    right:0;
}




.temp {
    float: left;
    padding-left: 10px;
    line-height: 32px;
    width: 120px;
}
#temp{
    height: 15px;
    width: 100%;
    margin-top: 4em;
    font-size: 1.5em;
    border-bottom: 1px solid #8aadfd
}

.war {
    position: absolute;
    text-align: center;
    width: 120px;
    height: 24px;
    line-height: 24px;
    color: #c00;
    background: #F5E8E0;
    color: #c00;
    border: 2px solid #f60;
    top: 80px;
    left: 150px;
    display: none;
}

.loader {
    text-align: center;
    margin: 140px auto 0;
}

.loader img {
    margin: 0 auto;
    display: block;
}

.info {
    width: 420px;
    margin: 10px 20px;
    color: #555;
}

.info h4 {
    height: 24px;
    line-height: 24px;
    font-size: 16px;
    border-bottom: 2px solid #eee;
    margin-bottom: 8px;
}

.info p {
    line-height: 20px;
}

.info p cite {
    float: right;
    font-size: 11px;
    font-weight: 100;
    font-style: normal;
}

.ress {
    float: left;
   margin-top: 10px;
    height: 3px;
    background: #1d70eb;
}


</style>
 

<body>
<h2>女性健康疾病自测问卷</h2>
<div class="main">


    <div class="ctrl">
        <div class="prog" id="prog">
            <div class="ptip" id="tips"><span></span></div>
            <div class="ress" id="ress"></div>
        </div>
    </div>
    <div class="warp">

        <div class="issue" id="issue">

            <div class="cnt">

                <h3>1、情绪紧张时,外阴是否产生灼热感?</h3>
                <ul>
                    <li><span>&nbsp;</span><label><input type="radio" name="is0" value="12"/></label></li>
                    <li><span>&nbsp;</span><label><input type="radio" name="is0" value="0"/>不是</label></li>


                </ul>
            </div>
            <div class="cnt">
                <h3> 2、性生活时是否有疼痛感?</h3>
                <ul>
                    <li><span>&nbsp;</span><label><input type="radio" name="is1" value="12"/></label></li>
                    <li><span>&nbsp;</span><label><input type="radio" name="is1" value="0"/>不是</label></li>

                </ul>
            </div>
            <div class="cnt">
                <h3>3、分泌物是否为灰白色?</h3>
                <ul>
                    <li><span>&nbsp;</span><label><input type="radio" name="is2" value="12"/></label></li>
                    <li><span>&nbsp;</span><label><input type="radio" name="is2" value="0"/>不是</label></li>
                </ul>
            </div>

            <div class="cnt">
                <h3>4、外阴是否有瘙痒的感觉?</h3>
                <ul>
                    <li><span>&nbsp;</span><label><input type="radio" name="is3" value="12"/></label></li>
                    <li><span>&nbsp;</span><label><input type="radio" name="is3" value="0"/>不是</label></li>

                </ul>
            </div>
            <div class="cnt">
                <h3>5、是否频繁地使用药物清洗外阴</h3>
                <ul>
                    <li><span>&nbsp;</span><label><input type="radio" name="is4" value="12"/></label></li>
                    <li><span>&nbsp;</span><label><input type="radio" name="is4" value="0"/>不是</label></li>
                </ul>
            </div>
            <div class="cnt">
                <h3>6、白带是否有异味??</h3>
                <ul>
                    <li><span>&nbsp;</span><label><input type="radio" name="is5" value="12"/></label></li>
                    <li><span>&nbsp;</span><label><input type="radio" name="is5" value="0"/>不是</label></li>
                </ul>
            </div>

            <div class="cnt">
                <h3>7、白带是否呈豆渣样或泡沫状?</h3>
                <ul>
                    <li><span>&nbsp;</span><label><input type="radio" name="is6" value="12"/></label></li>
                    <li><span>&nbsp;</span><label><input type="radio" name="is6" value="0"/>不是</label></li>

                </ul>
            </div>
            <div class="cnt">
                <h3>8、是否患有糖尿病?</h3>
                <ul>
                    <li><span>&nbsp;</span><label><input type="radio" name="is7" value="12"/></label></li>
                    <li><span>&nbsp;</span><label><input type="radio" name="is7" value="0"/>不是</label></li>

                </ul>
            </div>


            <div class="result" id="result">
                <div class="temp" id="temp">
                    您的分数
                </div>
                <div class="war" id="war"></div>
                <div id="re0">
                    <h3>您的测试结果:</h3>

                    <p>比较糟糕:</p>
                    <p>可能繁忙的日常生活让您无暇照顾
                        自己,不经意间您的阴道健康状况已经十分糟
                        糕。停下繁忙的脚步,抽时间去正规医院检查
                        一下吧。关心自己,才能照顾别人。</p>
                </div>
                <div id="re1">
                    <h3>您的测试结果:</h3>

                    <p>需要警惕:</p>
                    <p>或许是不太卫生的生活环境,或许
                        是太忙以至于疏忽。亲的阴道健康不容乐观。
                        建议有时间的话,尽快到正规专业的医院检查看看。日常也需多加注意清洁与卫生。</p>
                </div>
                <div id="re2">
                    <h3>您的测试结果:</h3>

                    <p>比较健康:</p>

                    <p>亲的阴道健康情况良好,这可能得
                        益于您不错的卫生习惯和极佳的卫生意识。未
                        来的生活也请继续保持!</p>
                </div>
            </div>

        </div>
    </div>


</div>

   <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript" >


$(document).ready(function(){    
    var i=0;
    var sld=0;
    var res=0;
    var len=$("#issue").find("div.cnt").length;    
    var prog=100;  //$("#prog").css("width");
    var ht=420;
    var speed=500;
    var page="result.html";
    
    function setporogress(j){
        i+=j;
        i=(i<0)? 0:i;
        checkbtn();
        if(!$("#info").is(":animated")){            
            $("#tips span").html((i+1>len?len:i+1)+"\/"+len+"");        
            var wh=$("#tips").get(0).offsetWidth;
            var ress=Math.round((i*prog/len)*10);
            $("#ress").css({"width": ress+"px"});        
            $("#tips").css({"left":ress-Math.round(wh/2)+"px"});
            $("#issue").animate({"top": -i*ht + "px"},500);
            }
        }
    function sel(ele){
        sld++;

    }
        
    function selec(ele){            
        sld++;
        //alert(sld);
        ele= $(ele)? $(ele):ele;
        ele.parents("div.cnt").addClass("selected");
        ele.addClass("sel");
        res+=parseInt (ele.find("input").val());

        if(sld==len){
                $("#temp").html("您最终得分是 "+res);
            return  sld;
                }

        }

    //进度条
    $("#prev").click(function(){
        checkbtn();                      
        if(i>0) {
            setporogress(-1)
            }
        })    
    $("#next").click(function(){
        checkbtn();                      
        if(sld>i) {
            setporogress(1)
            }
        })    
    //li的选择点击
    $("#issue").find("li").click(function(){                                  
            if(!$(this).parents("div.cnt").hasClass("selected")){                            
                selec(this);                
                }            
            setporogress(1);
            
            if(i==len){
                result(res);
                }    
            return false;    
        })
    .hover(
        function(){$(this).addClass("hover")},
        function(){$(this).removeClass("hover")}
        )

//结果
    function result(k){
    var toload;
    if(k>=80 && k<=100) toload=page+" #re0";
    if(k>70 && k<=79) toload=page+" #re1";
    if(k>56 && k<=69) toload=page+" #re2";
        if(k<56) toload=page+"re3";
    $("#result").load(toload);
}
/*    $("div.selected").click(function(){
        $(this).find("li").click();
        })
    */
    function warn(txt){
        $("#warp").html(txt).fadeIn(500,function(){$("#warp").html("").fadeOut(500)});
        }
    
    
    function checkbtn(){
        if(i<=0){
            $("#prev").addClass("noprev");
            }else{
                $("#prev").removeClass("noprev");
                }
        if(sld<=i){
            $("#next").addClass("nonext");
            }else{
                $("#next").removeClass("nonext");
                }    
        }
    
    setporogress(i);
    
    

})

</script>
</head>


</body>
</html>
View Code
arthurs的主页 arthurs | 初学一级 | 园豆:28
提问于:2016-06-22 17:15
< >
分享
最佳答案
0

CSS样式问题,改成下面这样即可

.warp {
width:80%;
/*height: 420px;*/
background: #fff;
overflow: hidden;
/*position: relative;*/
margin: 0 auto;
border-radius: 10px;
}

.issue {
/*position: absolute;*/
/*top: 0;
left: 0;*/
width: 100%;
height: auto;
/*z-index: 99;*/
}

.issue div {
/*height: 387px;*/
padding-bottom: 33px;
background: #fff;
/*float:left;
width:100%;
margin: 0 auto;*/
}

 

收获园豆:100
£冷☆月№ | 菜鸟二级 |园豆:304 | 2016-06-22 17:40
其他回答(4)
0

首先最后4行为什么是这样子。

</script>

</head>

</body>

</html>

 

长蘑菇星人 | 园豆:1820 (小虾三级) | 2016-06-22 17:44
0

这和应该是一个css样式问题 

吴小A | 园豆:204 (菜鸟二级) | 2016-06-23 13:38
0

 这里toload的值是“page #re0-3”,$("#result").load("toload")这句jQuery 会解析被返回的文档page,来查找带有容器 ID 的元素。该元素,连同其内容,会被插入带有结果 ID 的元素中,所取回文档的其余部分会被丢弃。

将id=re0-3的内容提出来存到一个文档中,然后修改var page = "文档名"; 

爱努力的小疯子 | 园豆:319 (菜鸟二级) | 2016-06-23 15:04
0

你的head结束标签放错了位置

smalltimoo | 园豆:148 (初学一级) | 2016-06-23 15:44
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册