jQuery单击功能:根据以前的单选按钮选择显示Div

时间:2014-10-02 14:58:35

标签: javascript jquery css radio-button show

我一整天都在寻找答案,但似乎无法找到任何有助于解决我的具体问题的事情,所以这里就是这样。

在问题表单中,我想使用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 code here

2 个答案:

答案 0 :(得分:1)

如果您不希望再次隐藏显示的div,那么只需从“显示”的项目中删除“隐藏”类

这是 JSFiddle

以下是如何做到这一点的一个示例行:

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

答案 1 :(得分:0)

只需删除所有

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

(现在使用fiddle