jQuery Click Function：基於先前的單選按鈕顯示Div

Question

我整天都在尋找答案，但似乎找不到任何可以幫助我解決特定問題的東西，因此請繼續。

在一個問題表單中，我想使用jQuery click（）函數基於單選按鈕選擇顯示隱藏的div。 但是，在觸發第二個click（）事件后，先前選擇中顯示的div被忘記，並返回到隱藏狀態。

這是示例代碼：

 jQuery(document).ready(function(){ jQuery('input[type="radio"]').click(function(){ if(jQuery(this).attr("value")=="answer1"){ jQuery(".hide").hide(); jQuery(".answer1").show(); jQuery(".answer1and2").show(); } if(jQuery(this).attr("value")=="answer2"){ jQuery(".hide").hide(); jQuery(".answer2").show(); jQuery(".answer1and2").show(); } if(jQuery(this).attr("value")=="answer3"){ jQuery(".hide").hide(); jQuery(".answer1and2").show(); jQuery(".answer3").show(); } }); }); 

 .hide { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <h1>Question 1</h1> <input type="radio" name="question1" value="answer1"> Answer 1 <input type="radio" name="question1" value="answer2"> Answer 2 <div class="answer1 hide"> <p>Answer 1 is Apple</p> </div> <div class="answer2 hide"> <p>Answer 2 is Mango</p> </div> <div class="answer1and2 hide"> <h1>Question 2</h1> <input type="radio" name="question2" value="answer3"> Any answer <input type="radio" name="question2" value="answer3"> Any answer </div> <div class="answer3 hide"> <p>Did you choose Apple or Mango?</p> </div> 

如何只保留第一次選擇后顯示的答案之一？

JSFiddle代碼在這里

Answer 1

如果您不希望再次隱藏顯示的div，則只需從獲得“顯示”的項目中刪除“隱藏”類

這是JSFiddle

這是如何執行此操作的示例行：

         jQuery(".answer1").show().removeClass('hide');

Answer 2

只需刪除每個

jQuery(".hide").hide();

（現在有小提琴 ）