使用条件隐藏jquery中的附加按钮

时间:2018-06-18 09:10:18

标签: javascript php jquery html css

我创建了一个带测验的网站,其中一次一个地从数据库加载问题。在所有问题结束时,显示分数。有一个后退按钮供用户编辑我使用ajax附加的问题。



<script>
  var currentQuestion = '';
  var preQuestion = 'false';
  function getPreQuestion(answer1=false, answer2=false, answer3=false, answer4=false){
      $.post("mohajax.php",
      {
        'previous_question' : 'Yes',
          next_id: currentQuestion,
          answer1: answer1,
          answer2: answer2,
          answer3: answer3,
          answer4: answer4,
      },
      function(data, status){
          $('#container_for_questions').html(data);
      });
  }
  function getQuestion(curr_id, answer1=false, answer2=false, answer3=false, answer4=false){
      if(curr_id != -1){
        currentQuestion = curr_id; // Set the value of curret question in global variable
        preQuestion = 'true'; }// Set previous question to true // Set previous question to true
      $.post("mohajax.php",
      {
          next_id: parseInt(curr_id)+1,
          answer1: answer1,
          answer2: answer2,
          answer3: answer3,
          answer4: answer4,
      },
      function(data, status){
          $('#container_for_questions').html(data);
          if(preQuestion == 'true'){
            $('#container_for_questions').append("<button onclick='getPreQuestion()'>Previous<button>");
          }
      });
  }

  function getCorrectAnswer(curr_id, answer1=false, answer2=false, answer3=false, answer4=false){
      $.post("mohajax_get_correct_answer.php",
      {
          next_id: parseInt(curr_id),
          answer1: answer1,
          answer2: answer2,
          answer3: answer3,
          answer4: answer4,
      },
      function(data, status){
          $('#container_for_questions').html(data);
      });
  }
  $(document).ready(function(){
          $('body').on('click','input[type="radio"]', function(){
              var curr_id = $('.question').data('nextQuestion');
              var answer1 = $('#radio1').is(':checked');
              var answer2 = $('#radio2').is(':checked');
              var answer3 = $('#radio3').is(':checked');
              var answer4 = $('#radio4').is(':checked');
              getCorrectAnswer(curr_id, answer1, answer2, answer3, answer4);
            setTimeout(
                getQuestion.bind(this,curr_id, answer1, answer2, answer3, answer4), 1000);

      });
      getQuestion(-1);
  });

  </script>
&#13;
&#13;
&#13;

下面是我用来调用我的问题的文件

&#13;
&#13;
<?php
// Start the session
session_start();

$con=mysqli_connect("localhost","root","","quiz"); // change here to your data
// Check connection
if (mysqli_connect_errno())
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }

// Check the number of all questions, if next_id is more than last question, back to first or whatever you want;
$response=mysqli_query($con,"select * from moh limit 25");
$number_of_all_questions = mysqli_num_rows($response);

if($_POST['next_id'] == 0){
	// reset to default
	$_SESSION["correct_score"] = 0;
	$_SESSION["not_correct_score"] = 0;
}


if($number_of_all_questions <= $_POST['next_id']){
	// Quiz finished, show results

    echo"<div>
	<h2>Results:</h2>
	<p>Your score is: {$_SESSION['correct_score']} out of 25</p>
	

	</div>";



}else{

	// query next question
	$response=mysqli_query($con,"select * from moh WHERE id =(select min(id) from moh where id > {$_POST['next_id']})");
	?>

	<?php while($result=mysqli_fetch_array($response,MYSQLI_ASSOC)){ ?>

		<div id="question_<?= $result['id'] ?>" class='question' data-next-question="<?= $_POST['next_id'] ?>"> <!--check the class for plurals if error occurs-->
			<h2><?= $result['id'].".".$result['question_name'] ?></h2>
      <div class='align'>
    <input type="radio" value="1" id='radio1' name='1' <?= (isset($_POST['previous_question']) && $_SESSION["last_answer"] == '1') ? 'checked="checked"' : '' ?>>
    <label id='ans1' for='radio1'><?= $result['answer1'] ?></label>
    <br/>
    <input type="radio" value="2" id='radio2' name='2' <?= (isset($_POST['previous_question']) && $_SESSION["last_answer"] == '2') ? 'checked="checked"' : '' ?>>
    <label id='ans2' for='radio2'><?= $result['answer2'] ?></label>
    <br/>
    <input type="radio" value="3" id='radio3' name='3' <?= (isset($_POST['previous_question']) && $_SESSION["last_answer"] == '3') ? 'checked="checked"' : '' ?>>
    <label id='ans3' for='radio3'><?= $result['answer3'] ?></label>
    <br/>
    <input type="radio" value="4" id='radio4' name='4' <?= (isset($_POST['previous_question']) && $_SESSION["last_answer"] == '4') ? 'checked="checked"' : '' ?>>
    <label id='ans4' for='radio4'><?= $result['answer4'] ?></label>
</div>
			<br/>
			<?php /*<input type="button" data-next-question="<?= $_POST['next_id'] ?>" id='next' value='Next!' name='question' class='butt'/> */?>
		</div>
	<?php }?>
<?php }?>
<?php mysqli_close($con); ?>
&#13;
&#13;
&#13;

现在问题是,当所有问题都完成后,分数将使用ajax显示在同一页面中。但它显示后面的按钮,我附加编辑问题。当所有问题都结束并显示分数时,我怎么能隐藏它

1 个答案:

答案 0 :(得分:1)

在这种情况下

if ($number_of_all_questions <= $_POST['next_id']) {
    // Quiz finished, show results

    echo"<div>
    <h2>Results:</h2>
    <p>Your score is: {$_SESSION['correct_score']} out of 25</p>
    </div>";
} else {

只需添加此

<script>
    $("button[onclick='getPreQuestion()']").hide();
</script>

最终代码

if($number_of_all_questions <= $_POST['next_id']){
    // Quiz finished, show results

    echo"<div>
    <h2>Results:</h2>
    <p>Your score is: {$_SESSION['correct_score']} out of 25</p>
    <script>
        $(\"button[onclick='getPreQuestion()']\").hide();
    </script>
    </div>";
} else {