javascript - 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 -->