嗨，我是jquery的新手，我正在尝试使用id进行循环 因此，每次按下按钮，它都会更新到下一个表单ID 我有9个表格
<!DOCTYPE HTML>
<head>
<title>
Quiz project
</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<script type="text/javascript" src="js/Jq/jquery.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<header>
<div id="lfup" class="pull-left">Quiz Project</div>
<div id="riup" class="pull-reight">Horizon</div>
</header>
<main>
<form class="form-group quesForm" id="q1" data-qusetion="1">
<h3 class="">What is the right way to declare (X) as a local variable in Jquery ?</h3>
<ul>
<div class="form-group">
<div class="col-md-3 listi"><li><input type="radio" name="q1" value="a" /><span>$("x = 5");</span></li></div>
<div class="col-md-3 listi"><li><input type="radio" name="q1" value="b" /><span>x = 5 ;</span></li></div>
<div class="col-md-3 listi"><li><input type="radio" name="q1" value="c" /><span>$x = 5 ;</span></li></div>
<div class="col-md-3 listi"><li><input type="radio" name="q1" value="d" /><span>var x = 5 ;</span></li></div>
</div>
</ul>
<div class="form-group">
<button id="Continue" class="btn btn-success">Continue</button>
</div>
</form>
<form class="form-group quesForm" id="q2" data-qusetion="2">
<h3>The Bootstrap grid system is based on how many columns ?</h3>
<ul>
<div class="form-group">
<div class="col-md-3 listi"><li><input type="radio" name="q2" value="a" /><span>10</span></li></div>
<div class="col-md-3 listi"><li><input type="radio" name="q2" value="b" /><span>3</span></li></div>
<div class="col-md-3 listi"><li><input type="radio" name="q2" value="c" /><span>6</span></li></div>
<div class="col-md-3 listi"><li><input type="radio" name="q2" value="d" /><span>12</span></li></div>
</div>
</ul>
<div class="form-group">
<button id="Continue" class="btn btn-success">Continue</button>
</div>
</form>
<form class="form-group quesForm" id="q3" data-qusetion="3">
<h3>Which class is used to create a black navigation bar ?</h3>
<ul>
<div class="form-group">
<div class="col-md-3 listi"><li><input type="radio" name="q3" value="a" /><span>navbar-inverse</span></li></div>
<div class="col-md-3 listi"><li><input type="radio" name="q3" value="b" /><span>navbar-default</span></li></div>
<div class="col-md-3 listi"><li><input type="radio" name="q3" value="c" /><span>navbar-dark</span></li></div>
<div class="col-md-3 listi"><li><input type="radio" name="q3" value="d" /><span>.navbar-inverse</span></li></div>
</div>
</ul>
<div class="form-group">
<button id="Continue" class="btn btn-success">Continue</button>
</div>
</form>
<form class="form-group quesForm" id="q4" data-qusetion="4">
<h3>What does HTML stand for ?</h3>
<ul>
<div class="form-group">
<div class="col-md-3 listi"><li><input type="radio" name="q4" value="a" /><span>Home page Tab Markup Language</span></li></div>
<div class="col-md-3 listi"><li><input type="radio" name="q4" value="b" /><span>Hyperlinks Text Markup Language</span></li></div>
<div class="col-md-3 listi"><li><input type="radio" name="q4" value="c" /><span>Hyper Text Markup Language</span></li></div>
<div class="col-md-3 listi"><li><input type="radio" name="q4" value="d" /><span>Hyperlink Table Must Language</span></li></div>
</div>
</ul>
<div class="form-group">
<button id="Continue" class="btn btn-success">Continue</button>
</div>
</form>
<form class="form-group quesForm" id="q5" data-qusetion="5">
<h3>How do you display a border like this:
<br />
The top border = 10 pixels<br />
The bottom border = 5 pixels<br />
The left border = 20 pixels<br />
The right border = 1pixel ?</h3>
<ul>
<div class="form-group">
<div class="col-md-3 listi"><li><input type="radio" name="q5" value="a" /><span>border-width:10px 5px 20px 1px;</span></li></div>
<div class="col-md-3 listi"><li><input type="radio" name="q5" value="b" /><span>border-width:10px 20px 5px 1px;</span></li></div>
<div class="col-md-3 listi"><li><input type="radio" name="q5" value="c" /><span>border-width:10px 1px 5px 20px;</span></li></div>
<div class="col-md-3 listi"><li><input type="radio" name="q5" value="d" /><span>border-width:1px 5px 20px 10px;</span></li></div>
</div>
</ul>
<div class="form-group">
<button id="Continue" class="btn btn-success">Continue</button>
</div>
</form>
<form class="form-group quesForm" id="q6" data-qusetion="6">
<h3>What is the default value of the position property ?</h3>
<ul>
<div class="form-group">
<div class="col-md-3 listi"><li><input type="radio" name="q6" value="a" /><span>fixed</span></li></div>
<div class="col-md-3 listi"><li><input type="radio" name="q6" value="b" /><span>static</span></li></div>
<div class="col-md-3 listi"><li><input type="radio" name="q6" value="c" /><span>relative</span></li></div>
<div class="col-md-3 listi"><li><input type="radio" name="q6" value="d" /><span>absolute</span></li></div>
</div>
</ul>
<div class="form-group">
<button id="Continue" class="btn btn-success">Continue</button>
</div>
</form>
<form class="form-group quesForm" id="q7" data-qusetion="7">
<h3>Look at the following selector: $("p"). What does it select in jQuery ?</h3>
<ul>
<div class="form-group">
<div class="col-md-3 listi"><li><input type="radio" name="q7" value="a" /><span>All p elements</span></li></div>
<div class="col-md-3 listi"><li><input type="radio" name="q7" value="b" /><span>The first p element</span></li></div>
<div class="col-md-3 listi"><li><input type="radio" name="q7" value="c" /><span>Does nothing</span></li></div>
<div class="col-md-3 listi"><li><input type="radio" name="q7" value="d" /><span>It's not even jQuery...</span></li></div>
</div>
</ul>
<div class="form-group">
<button id="Continue" class="btn btn-success">Continue</button>
</div>
</form>
<form class="form-group quesForm" id="q8" data-qusetion="8">
<h3>To use jQuery, you do not have to do anything. Most browsers (Internet Explorer, Chrome, Firefox and Opera) have the jQuery library built in the browser ?</h3>
<ul>
<div class="form-group">
<div class="col-md-6 listi"><li><input type="radio" name="q8" value="a" /><span>True</span></li></div>
<div class="col-md-6 listi"><li><input type="radio" name="q8" value="b" /><span>False</span></li></div>
</div>
</ul>
<div class="form-group">
<button id="Continue" class="btn btn-success">Continue</button>
</div>
</form>
<div id="result">
</div>
<br />
</main>
<footer>
<div class="pull-left">Web Developer Quiz</div>
<div class="pull-reight"><a href="http://horizonedu.tk/">© Horizon.tk</a></div>
</footer>
</div>
<script>$(document).ready(function(){
$(".quesForm").hide();
$("#q1").show();
var arr = ["q1","q2","q3","q4","q5","q6","q7","q8","q9"];
$.each( arr, function( i, val ){return ( val !== "q9" );});
$(".btn").click(function(){
$(".quesForm").hide();
$("#" + val).fadeIn(1500);
return false;
});
这是html文档，我不想一遍又一遍地重复这段代码
$("#q1 #Continue").click(function(){
$(".quesForm").hide(); proc("q1");
$("#q2").fadeIn(1500);
return false;
});
$("#q2 #Continue").click(function(){
$(".quesForm").hide(); proc("q2");
$("#q3").fadeIn(1500);
return false;
});
谢谢
答案 0 :(得分：0)
删除所有脚本代码并尝试使用
<script>
$(document).ready(function(){
$(".quesForm").hide();
$("#q1").show();
var nextFormToShow=1;
$(".btn").click(function(i){
$(".quesForm").hide();
if(nextFormToShow<9)
{
$("#q"+(nextFormToShow+1)).fadeIn(1000);
nextFormToShow=(nextFormToShow+1);
}
return false;
});
});
</script>