jQuery点击功能:显示基于先前单选按钮选择的Div

jQuery Click Function: Show Div Based on Previous Radio Button Selection

本文关键字：单选按钮 于先前 选择 Div 显示 功能 jQuery      更新时间：2023-09-26

我一整天都在寻找答案，但似乎找不到任何有助于我解决特定问题的东西，所以就这样吧。

在问题表单中，我想使用jQuery click（）函数显示基于单选按钮选择的隐藏div。但在触发第二个click（）事件后，上一次选择中显示的div将被遗忘，并返回到隐藏状态。

下面是一个示例代码：

jQuery(document).ready(function(){
   jQuery('input[type="radio"]').click(function(){
            if(jQuery(this).attr("value")=="answerswer1"){
                jQuery(".hide").hide();
                jQuery(".answer1").show();
                jQuery(".answer1and2").show();
            }                                                                                    
            if(jQuery(this).attr("value")=="answerswer2"){
                jQuery(".hide").hide();
                jQuery(".answer2").show();
                jQuery(".answer1and2").show();
            }
            if(jQuery(this).attr("value")=="answerswer3"){
                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="answerswer1">
Answer 1
<input type="radio" name="question1" value="answerswer2">
Answer 2
    
<div class="answerswer1 hide">
<p>Answer 1 is Apple</p>
</div>
<div class="answerswer2 hide">
<p>Answer 2 is Mango</p>
</div>
 
<div class="answerswer1and2 hide">
<h1>Question 2</h1>
<input type="radio" name="question2" value="answerswer3">
Any answer
<input type="radio" name="question2" value="answerswer3">
Any answer
</div>
<div class="answerswer3 hide">
<p>Did you choose Apple or Mango?</p>
</div>

如何只保留第一次选择后显示的一个答案？

JSFiddle代码此处

如果您不想再次隐藏显示的div，那么只需从"显示"的项目中删除"隐藏"类

这是JSFiddle

下面是如何做到这一点的一行示例：

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

只需删除每个

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

（现在用小提琴）

相关文章：