gpt4 book ai didi

javascript - jQuery 点击函数 : Show Div Based on Previous Radio Button Selection

转载 作者:太空宇宙 更新时间:2023-11-04 12:50:54 25 4
gpt4 key购买 nike

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

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

最佳答案

如果您不想再次隐藏显示的 div,则只需从您“显示”的元素中删除“隐藏”类

这是 JSFiddle

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

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

关于javascript - jQuery 点击函数 : Show Div Based on Previous Radio Button Selection,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26163665/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com