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按钮，您可以在单击按钮时告诉页面提交表单。由于没有为表单指定任何操作，因此它将默认为当前页面。因此，每次单击其中一个提交按钮时，将触发单击事件，并执行绑定的处理程序，这使下一个问题可见。然而，它然后将表单提交给自己，重新加载页面。重新加载的页面没有关于表单提交之前的状态的线索，因此它再次显示了初始状态（第一个问题）。

根据您发布的代码，按钮没有理由使用submit类型。因此，除非此代码中未包含任何原因，否则您只需将其更改为type="button"即可解决问题。这也可以让你摆脱所有<form>元素。

Answer 2

如果您的所有问题都在页面上，并且您只是显示/隐藏它们，那么您最好使用<a href="#" class="next">类型条目而不是表单/按钮进行此导航。实际上只有两个链接 - 一个用于下一个，一个用于前一个，然后存储你当前在变量中的问卷中。 Something like this

无论如何，此处的快速解决方法是简单地阻止使用$.preventDefault()提交表单。

$('_selector_').click(function(e) {
    e.preventDefault();
    $('_selector_').css({'display':'none'});
    $('_selector_').css({'display':'block'});
});

Answer 3

由于您的评论提到还需要将此视图发送到服务器，因此我将包含一个解决该问题的答案。您可能应该在初始问题中包含该内容。

话虽如此，请了解有关事件处理程序如何在JavaScript和jQuery中工作的知识。某些元素会释放除click之外的某些事件，因此您需要了解某些类型元素的浏览器默认值。在这种情况下，＆＃34;提交＆＃34;的默认操作按钮是将表单POST回页面。很容易禁用它。

我冒昧地干掉你的代码......有点复杂，但整体代码更少 - 更容易维护：）

$(document).ready(function() {

  var currentQuestion = 1

  // ignore form submits
  $('.Question form').on('submit', function(e) {
    e.preventDefault() 
  })


  // Loop through all the questions
  $('.Question').each(function(i, qEl) {
    var question = $(qEl)

    // When the 'submit' button is clicked, fire our next function
    // You could make these more readable by adding classes to the buttons.
    question.find('button[type="submit"]').on('click', next);

    // Same for previous
    question.find('button[type="button"]').on('click', prev);

    function next() {
      // Add 1 to the question counter. Notice how the current question
      // variable is *outside* of this `closure`. Look that term up.
      currentQuestion++

      // If the counter goes outside how many questions we have
      // reset it to be 10
      if (currentQuestion > 10) {
        currentQuestion = 10
      }

      updateQuestions()
      // Here we could send off the form state, and wait till the 
      // server responds before we show the next question.
      // $.ajax({
      //   type: 'post',
      //   url: location.pathname,
      //   data: question.find('form').serialize()
      // }).then(updateQuestions)
    }

    // Same as next except the opposite.
    function prev() {
      currentQuestion--
      if (currentQuestion < 1) {
        currentQuestion = 1
      }
      updateQuestions()
    }

  })

  // Here we just loop through all the questions, and based on the 
  // currentQuestion variable, we only show the active one.
  function updateQuestions() {
    $('.Question').each(function(i, qEl) {
      var question = $(qEl)
      var id = question.attr('id')

      // Here we strip off the string, and parse '01' into a number.
      var num = parseInt(id.replace('FlexibilityQ', ''), 10)
      if (num === currentQuestion) {
        question.show()
      } else {
        question.hide()
      }

      // If you need to do special logic for the finish
      // you can just say
      // if (num === 10) { doSomethingSpecial() }
    })
  }

})

JQuery CSS显示更改切换回来

3 个答案: