javascript - jQuery可以.hide()div但不能.show()

我现在有一个简单的网页，上面有一个问题和一堆单选按钮。根据用户选择的单选按钮，它将隐藏问题并显示正确消息或错误消息，这些消息被隐藏。
它与表单提交事件上的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 -->

最佳答案

你在隐藏问题和答案。将#question移到包含问题的行。您还缺少id="question"中的#

$(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 -->