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();

（现在有小提琴 ）