JQuery可以.hide（）div但不能.show（）

Question

我目前有一個簡單的問題和一堆單選按鈕的網頁。根據用戶對單選按鈕的選擇，它會隱藏問題並顯示隱藏的正確消息或不正確消息。

它在表單提交事件上與JQuery一起工作，它應該隱藏問題，查看哪個單選按鈕被選中並且.show（）適當的div。問題是一切隱藏好，但它不會顯示。我甚至嘗試交換來調試排序，而作品的相反方向錯誤，將在表單提交時隱藏元素。任何想法爲什麼？

代碼在下面;

$(document).ready(function(){ 
 
    $('#passed').hide(); 
 
    $('#allGo').hide(); 
 
    $("#onlyPhilip").hide(); 
 
    $("#nobodyGoes").hide(); 
 

 

 
    $("#carBoatForm").submit(function(e){ 
 
     e.preventDefault(); 
 
     $("#question").hide(); 
 
     if($('#withoutMark').is(':checked')){ 
 
     $('#passed').show(); 
 
     } else if($('#theyAllGo').is(':checked')){ 
 
     $('allGo').show(); 
 
     } else if ($('#onlyPhilipGoes').is(':checked')) { 
 
     $('#onlyPhilip').show(); 
 
     } else if ($('#nobodyCanGo').is(':checked')) { 
 
     $('#nobodyGoes').show(); 
 
     } 
 
    }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row" id="question"> 
 
     <div class="col-md-8 col-md-offset-3"> 
 
     <h2 class="challengeTitle">Challenge 2</h2> 
 
     <h3 class="challengeHeading">The Big IF!</h3> 
 
     <p class="challengeText">Philip and Susan are taking a trip by boat. The boat's rules are that a cars total weight must be below 2066kg. 
 
     <br>Philip's car weighs 1865kg 
 
     <br>Philip weighs 75kg 
 
     <br>Susan weighs 50kg 
 
     <br>Then their friend Mark asks if he can come along. Mark weights 67kg.</p> 
 
     <p class="challengeText">Which of the following statements are true?</p> 
 

 
     <form id="carBoatForm"> 
 
      <input type="radio" name="boatAnswer" id="theyAllGo"> They can all go on the trip <br> 
 
      <input type="radio" name="boatAnswer" id="onlyPhilipGoes"> Only Philip can go on the trip <br> 
 
      <input type="radio" name="boatAnswer" id="withoutMark"> Philip and Susan can go, but Mark cannot <br> 
 
      <input type="radio" name="boatAnswer" id="nobodyCanGo"> Nobody can go <br> 
 
      <input type="submit" value="Enter"> 
 
     </form> 
 
    </div><!--End Content Section --> 
 

 
    <div class="row"> 
 
     <div class="col-md-8 col-md-offset-4"> 
 
     <div id="passed"> 
 
      <h2>Good Job!</h2> 
 
      <h3>Philip and Susan can go on the trip, but sadly Mark would put the total weight over by 1kg, so he cannot come along.</h3> 
 
      <button type="button" class="btn btn-primary"> Continue </button> 
 
     </div> 
 

 
     <div id="onlyPhilip"> 
 
      <h2> Close but nope!</h2> 
 
      <h3>Although it is true that Philip could go on his own, the trip isn't restricted to only Philip being able to go.</h3> 
 
      <button type="button" class="btn btn-primary"> Try Again </button> 
 
     </div> 
 

 
     <div id="allGo"> 
 
      <h2> Sorry this is wrong!</h2> 
 
      <h3>Try again focusing on the weights. Can they all definitely go on? Remember the boat checks the total weight of a car.</h3> 
 
      <button type="button" class="btn btn-primary"> Try Again </button> 
 
     </div> 
 

 
     <div id="nobodyGoes"> 
 
      <h2> Incorrect!</h2> 
 
      <h3>Sure nobody has to go on the trip, but where's the fun in that! Try again, this time maybe let some people have fun.</h3> 
 
      <button type="button" class="btn btn-primary"> Try Again </button> 
 
     </div> 
 
     </div> 
 
    </div><!--End Section -->

Answer 1

你躲在#question，它包裝的問題和答案。將id="question"移至包含問題的行。你也失蹤了#在$('#allGo').show();

$(document).ready(function(){ 
 
    $('#passed').hide(); 
 
    $('#allGo').hide(); 
 
    $("#onlyPhilip").hide(); 
 
    $("#nobodyGoes").hide(); 
 

 

 
    $("#carBoatForm").submit(function(e){ 
 
     e.preventDefault(); 
 
     $("#question").hide(); 
 
     if($('#withoutMark').is(':checked')){ 
 
     $('#passed').show(); 
 
     } else if($('#theyAllGo').is(':checked')){ 
 
     $('#allGo').show(); 
 
     } else if ($('#onlyPhilipGoes').is(':checked')) { 
 
     $('#onlyPhilip').show(); 
 
     } else if ($('#nobodyCanGo').is(':checked')) { 
 
     $('#nobodyGoes').show(); 
 
     } 
 
    }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
     <div class="col-md-8 col-md-offset-3" id="question"> 
 
     <h2 class="challengeTitle">Challenge 2</h2> 
 
     <h3 class="challengeHeading">The Big IF!</h3> 
 
     <p class="challengeText">Philip and Susan are taking a trip by boat. The boat's rules are that a cars total weight must be below 2066kg. 
 
     <br>Philip's car weighs 1865kg 
 
     <br>Philip weighs 75kg 
 
     <br>Susan weighs 50kg 
 
     <br>Then their friend Mark asks if he can come along. Mark weights 67kg.</p> 
 
     <p class="challengeText">Which of the following statements are true?</p> 
 

 
     <form id="carBoatForm"> 
 
      <input type="radio" name="boatAnswer" id="theyAllGo"> They can all go on the trip <br> 
 
      <input type="radio" name="boatAnswer" id="onlyPhilipGoes"> Only Philip can go on the trip <br> 
 
      <input type="radio" name="boatAnswer" id="withoutMark"> Philip and Susan can go, but Mark cannot <br> 
 
      <input type="radio" name="boatAnswer" id="nobodyCanGo"> Nobody can go <br> 
 
      <input type="submit" value="Enter"> 
 
     </form> 
 
    </div><!--End Content Section --> 
 

 
    <div class="row"> 
 
     <div class="col-md-8 col-md-offset-4"> 
 
     <div id="passed"> 
 
      <h2>Good Job!</h2> 
 
      <h3>Philip and Susan can go on the trip, but sadly Mark would put the total weight over by 1kg, so he cannot come along.</h3> 
 
      <button type="button" class="btn btn-primary"> Continue </button> 
 
     </div> 
 

 
     <div id="onlyPhilip"> 
 
      <h2> Close but nope!</h2> 
 
      <h3>Although it is true that Philip could go on his own, the trip isn't restricted to only Philip being able to go.</h3> 
 
      <button type="button" class="btn btn-primary"> Try Again </button> 
 
     </div> 
 

 
     <div id="allGo"> 
 
      <h2> Sorry this is wrong!</h2> 
 
      <h3>Try again focusing on the weights. Can they all definitely go on? Remember the boat checks the total weight of a car.</h3> 
 
      <button type="button" class="btn btn-primary"> Try Again </button> 
 
     </div> 
 

 
     <div id="nobodyGoes"> 
 
      <h2> Incorrect!</h2> 
 
      <h3>Sure nobody has to go on the trip, but where's the fun in that! Try again, this time maybe let some people have fun.</h3> 
 
      <button type="button" class="btn btn-primary"> Try Again </button> 
 
     </div> 
 
     </div> 
 
    </div><!--End Section -->