为什么我的问卷代码只显示第一个结果
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> </span><label><input type="radio" name="is0" value="12"/>是</label></li> <li><span> </span><label><input type="radio" name="is0" value="0"/>不是</label></li> </ul> </div> <div class="cnt"> <h3> 2、性生活时是否有疼痛感？</h3> <ul> <li><span> </span><label><input type="radio" name="is1" value="12"/>是</label></li> <li><span> </span><label><input type="radio" name="is1" value="0"/>不是</label></li> </ul> </div> <div class="cnt"> <h3>3、分泌物是否为灰白色？</h3> <ul> <li><span> </span><label><input type="radio" name="is2" value="12"/>是</label></li> <li><span> </span><label><input type="radio" name="is2" value="0"/>不是</label></li> </ul> </div> <div class="cnt"> <h3>4、外阴是否有瘙痒的感觉？</h3> <ul> <li><span> </span><label><input type="radio" name="is3" value="12"/>是</label></li> <li><span> </span><label><input type="radio" name="is3" value="0"/>不是</label></li> </ul> </div> <div class="cnt"> <h3>5、是否频繁地使用药物清洗外阴</h3> <ul> <li><span> </span><label><input type="radio" name="is4" value="12"/>是</label></li> <li><span> </span><label><input type="radio" name="is4" value="0"/>不是</label></li> </ul> </div> <div class="cnt"> <h3>6、白带是否有异味？？</h3> <ul> <li><span> </span><label><input type="radio" name="is5" value="12"/>是</label></li> <li><span> </span><label><input type="radio" name="is5" value="0"/>不是</label></li> </ul> </div> <div class="cnt"> <h3>7、白带是否呈豆渣样或泡沫状？</h3> <ul> <li><span> </span><label><input type="radio" name="is6" value="12"/>是</label></li> <li><span> </span><label><input type="radio" name="is6" value="0"/>不是</label></li> </ul> </div> <div class="cnt"> <h3>8、是否患有糖尿病？</h3> <ul> <li><span> </span><label><input type="radio" name="is7" value="12"/>是</label></li> <li><span> </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>
最佳答案
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
其他回答(4)
0
首先最后4行为什么是这样子。
</script>
</head>
</body>
</html>
0
这和应该是一个css样式问题
0
这里toload的值是“page #re0-3”，$("#result").load("toload")这句jQuery 会解析被返回的文档page，来查找带有容器 ID 的元素。该元素，连同其内容，会被插入带有结果 ID 的元素中，所取回文档的其余部分会被丢弃。
将id=re0-3的内容提出来存到一个文档中，然后修改var page = "文档名";
0
你的head结束标签放错了位置
