JavaScript选择题问题

zhang542069129 2017-11-11 10:11:10
我的项目是这个意思(只用到前台实现,不要后台),根据选择题的个数,来切换到下一题,如果该题目没有被选中,提示“请答题”,如果到了最后一题提示“到底啦”。请问一下,我的代码哪里有问题?

<body onload="init()">
<div class="ppt">
<div id="div1" class="all">
<div class="pic">
<p>This is the first question description.</p>
<div id='1' class="text">
<input id='a' type="radio" name="radio" class="o"/><span class="f">A.one11</span><br>
<input id='b' type="radio" name="radio" class="o"/><span class="f">B.two</span><br>
<input id='c' type="radio" name="radio" class="o"/><span class="t">C.three</span><br>
<input id='d' type="radio" name="radio" class="o"/><span class="f">D.four</span><br>
</div>
<div id='1' class="anwser">正确答案是:C</div>
</div>

<div class="pic">
<p>This is the first question description.</p>
<div id='2' class="text">
<input id='a' type="radio" name="radios" class="t"/><span class="to">A.one22</span><br>
<input id='b' type="radio" name="radios" class="t"/><span class="fo">B.two</span><br>
<input id='c' type="radio" name="radios" class="t"/><span class="fo">C.three</span><br>
<input id='d' type="radio" name="radios" class="t"/><span class="fo">D.four</span><br>
</div>
<div id="2" class="anwser">正确答案是:A</div>
</div>

<div class="pic">
<p>This is the first question description.</p>
<div id='3' class="text">
<input id='a' type="radio" name="radiot" class="s"/><span class="ts">A.one33</span><br>
<input id='b' type="radio" name="radiot" class="s"/><span class="fs">B.two</span><br>
<input id='c' type="radio" name="radiot" class="s"/><span class="fs">C.three</span><br>
<input id='d' type="radio" name="radiot" class="s"/><span class="fs">D.four</span><br>
</div>
<div id="3" class="anwser">正确答案是:A</div>
</div>

</div>
<!-- <div class="l lrpub">l</div>-->
<div class="r lrpub">下一题</div>
</div>

</body>

   var k = 0;

$(".r").click(function() {

if (k < $(".pic").length-1 && $("input").is(':checked')) {
k++;

} else if($(("input").length-1).prop("checked", false)){
alert("不能为空")
}
else if(k<$(".pic").length-1){

alert("到底啦");
}else{
alert("请答题")
}
$(".pic").eq(k).show().siblings(".pic").hide();


});
...全文
331 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
全息宇宙 2017-12-18
  • 打赏
  • 举报
回复
七八年没来了,测试下,帮顶
DenggLin 2017-12-18
  • 打赏
  • 举报
回复
顺便提醒一下,一个页面里不能有相同的id
DenggLin 2017-12-18
  • 打赏
  • 举报
回复
<!DOCTYPE html> <html> <head> <title></title> </head> <body onload="init()"> <div class="ppt"> <div id="div1" class="all"> <div class="pic"> <p>This is the first question description.</p> <div id='1' class="text"> <input id='a' type="radio" name="radio" class="o" value="A"/><span class="f">A.one11</span><br> <input id='b' type="radio" name="radio" class="o"/><span class="f">B.two</span><br> <input id='c' type="radio" name="radio" class="o"/><span class="t">C.three</span><br> <input id='d' type="radio" name="radio" class="o"/><span class="f">D.four</span><br> </div> <div class="anwser">A</div> </div> <div class="pic"> <p>This is the first question description.</p> <div id='2' class="text"> <input id='a' type="radio" name="radios" value="A" class="t"/><span class="to">A.one22</span><br> <input id='b' type="radio" name="radios" class="t" value="B"/><span class="fo">B.two</span><br> <input id='c' type="radio" name="radios" class="t"/><span class="fo">C.three</span><br> <input id='d' type="radio" name="radios" class="t"/><span class="fo">D.four</span><br> </div> <div class="anwser">B</div> </div> <div class="pic"> <p>This is the first question description.</p> <div id='3' class="text"> <input id='a' type="radio" name="radiot" class="s" value="A"/><span class="ts">A.one33</span><br> <input id='b' type="radio" name="radiot" class="s"/><span class="fs">B.two</span><br> <input id='c' type="radio" name="radiot" class="s"/><span class="fs">C.three</span><br> <input id='d' type="radio" name="radiot" class="s"/><span class="fs">D.four</span><br> </div> <div class="anwser">A</div> </div> </div> <!-- <div class="l lrpub">l</div>--> <div class="r lrpub">下一题</div> </div> <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> <script type="text/javascript"> $(function(){ $(".pic:not(:eq(0))").hide(); }); var k=0; $(".r").click(function() { if (k < $(".pic").length) { if($(".pic:eq("+k+") input").is(':checked')){ for(var i=0;i<$(".pic").eq(k).children().children('input').length;i++) { if($(".pic").eq(k).children().children('input').eq(i).is(':checked')==true) { if($(".pic").eq(k).children().children('input').eq(i).val()==$(".pic").eq(k).children(".anwser").html()){ alert('答案正确') k++; $(".pic").eq(k).show().siblings(".pic").hide(); } else{ alert('答案错误请继续选择') return } } } debugger }else{ alert("请答题"); } }else{ alert("到底啦"); } }); </script> </body> </html>
wwww_net 2017-12-15
  • 打赏
  • 举报
回复

       $(function(){
   		$(".pic:not(:eq(0))").hide();
   	});

   	var k=0;
   	$(".r").click(function() {
   		if (k < $(".pic").length) {
   			if($(".pic:eq("+k+") input").is(':checked')){
   				k++;
   				$(".pic").eq(k).show().siblings(".pic").hide();
   			}else{
   				alert("请答题");
   			}
   			
   		}else{
   			alert("到底啦");
   		}
   	});

87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧