JQuery CSS 显示更改切换回来

Question

我有一个 JQuery 文件只显示测验的一个问题。当您单击提交按钮时，它应该前进到下一个问题，确实如此，但在按下按钮时只有一瞬间，然后切换回第一个问题。

我的代码如下:

$(document).ready(function() {
	"use strict";
// Question 01
	$('button#FlexibilityNext01').click(function() {
		$('#FlexibilityQ01').css({'display':'none'});
		$('#FlexibilityQ02').css({'display':'block'});
	});
	
// Question 02
	$('button#FlexibilityNext02').click(function() {
		$('#FlexibilityQ02').css({'display':'none'});
		$('#FlexibilityQ03').css({'display':'block'});
	});
	
	$('button#FlexibilityPrev02').click(function() {
		$('#FlexibilityQ01').css({'display':'block'});
		$('#FlexibilityQ02').css({'display':'none'});
	});

// Question 03	
	$('button#FlexibilityNext03').click(function() {
		$('#FlexibilityQ03').css({'display':'none'});
		$('#FlexibilityQ04').css({'display':'block'});
	});
	
	$('button#FlexibilityPrev03').click(function() {
		$('#FlexibilityQ02').css({'display':'block'});
		$('#FlexibilityQ03').css({'display':'none'});
	});
	
// Question 04	
	$('button#FlexibilityNext04').click(function() {
		$('#FlexibilityQ04').css({'display':'none'});
		$('#FlexibilityQ05').css({'display':'block'});
	});
	
	
	$('button#FlexibilityPrev04').click(function() {
		$('#FlexibilityQ03').css({'display':'block'});
		$('#FlexibilityQ04').css({'display':'none'});
	});
	
// Question 05	
	$('button#FlexibilityNext05').click(function() {
		$('#FlexibilityQ05').css({'display':'none'});
		$('#FlexibilityQ06').css({'display':'block'});
	});
	
	$('button#FlexibilityPrev05').click(function() {
		$('#FlexibilityQ04').css({'display':'block'});
		$('#FlexibilityQ05').css({'display':'none'});
	});
	
// Question 06	
	$('button#FlexibilityNext06').click(function() {
		$('#FlexibilityQ06').css({'display':'none'});
		$('#FlexibilityQ07').css({'display':'block'});
	});
	
	$('button#FlexibilityPrev07').click(function() {
		$('#FlexibilityQ06').css({'display':'block'});
		$('#FlexibilityQ07').css({'display':'none'});
	});
	
// Question 07
	$('button#FlexibilityNext07').click(function() {
		$('#FlexibilityQ07').css({'display':'none'});
		$('#FlexibilityQ08').css({'display':'block'});
	});
	
	$('button#FlexibilityNext03').click(function() {
		$('#FlexibilityQ07').css({'display':'block'});
		$('#FlexibilityQ08').css({'display':'none'});
	});
	
// Question 08	
	$('button#FlexibilityNext08').click(function() {
		$('#FlexibilityQ08').css({'display':'none'});
		$('#FlexibilityQ09').css({'display':'block'});
	});
	

	$('button#FlexibilityNext03').click(function() {
		$('#FlexibilityQ08').css({'display':'block'});
		$('#FlexibilityQ09').css({'display':'none'});
	});
	
// Question 09
	$('button#FlexibilityNext09').click(function() {
		$('#FlexibilityQ09').css({'display':'none'});
		$('#FlexibilityQ10').css({'display':'block'});
	});
	
	$('button#FlexibilityNext03').click(function() {
		$('#FlexibilityQ09').css({'display':'block'});
		$('#FlexibilityQ10').css({'display':'none'});
	});
	
// Question 10
	$('button#FlexibilityFinishQuiz').click(function() {
		$('#FlexibilityQ10').css({'display':'none'});
		$('#RetakeQuiz').css({'display':'block'});
	});

	$('button#FlexibilityNext03').click(function() {
		$('#FlexibilityQ10').css({'display':'block'});
		$('#RetakeQuiz').css({'display':'none'});
	});
	
// RetakeQuiz
	$('#FlexibilityRetakeQuiz').click(function() {
		$('#FlexibilityRetakeQuiz').css({'display':'none'});
		$('#FlexibilityQ01').css({'display':'block'});
	});
	
});

<div class="Question" id="FlexibilityQ01">
      <form id="FlexibilityFormQ01"> 
        <!-- form question here -->
      <button type="submit" id="FlexibilityNext01">Next Question</button>
      </form>
</div>  <!-- class="Question" id="Q1" -->


<div class="Hidden Question" id="FlexibilityQ02">
      <form id="FlexibilityFormQ02"> 
      <button type="button" id="FlexibilityPrev02">Previous Question</button>
       <button type="submit" id="FlexibilityNext02">Next Question</button>
      </form>
</div>  <!-- class="Question" id="Q2" -->


<div class="Hidden Question" id="FlexibilityQ03">
      <form id="FlexibilityFormQ03"> 
      <button type="button" id="FlexibilityPrev03">Previous Question</button>
       <button type="submit" id="FlexibilityNext03">Next Question</button>
      </form>
</div>  <!-- class="Question" id="Q3" -->


<!-- Questions 4-9 are the same exact format but with changed numbers -->


<div class="Hidden Question" id="FlexibilityQ10">
      <form id="FlexibilityFormQ10"> 
      <button type="button" id="FlexibilityPrev10">Previous Question</button>
    <button type="submit" id="FlexibilityFinishQuiz">Finish Quiz</button>
    </form>
</div>  <!-- class="Question" id="Q10" -->

我也试过使用:

$('#id').hide();
$('#id').show();

和

$("#id").css("display", "none");
$("#id").css("display", "block");

但似乎所有人都遇到了同样的问题。

Answer 1

通过使用 submit按钮，您是在告诉页面在单击按钮时提交表单。由于没有为表单指定任何操作，因此它将默认为当前页面。因此，每次单击其中一个提交按钮时，都会触发单击事件，并执行绑定(bind)的处理程序，从而使下一个问题可见。然而，它随后将表单提交给自己，从而重新加载页面。重新加载的页面不知道它在提交表单之前所处的状态，因此它再次显示初始状态(第一个问题)。

根据您发布的代码，按钮没有理由具有 submit 类型.因此，除非此代码中没有包含原因，否则您可以将它们更改为 type="button"它会解决问题。这也可以让你摆脱所有 <form>元素。