我目前有一个简单的网页，上面有一个问题和一堆单选按钮。根据用户对单选按钮的选择，它会隐藏问题并显示隐藏的正确消息或错误消息。
它与表单提交事件上的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 -->
答案 0 :(得分：3)
你隐藏了#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 -->