[英]Show/hide DIV based on selected radio button input
我试图根据选择单选按钮的值来切换具有相同数据属性值的多个DIV。
但是我不确定下面的代码有什么问题。
默认情况下,第一个单选按钮始终在加载时处于选中状态,如何触发它以显示匹配值的3个DIV?
加价:
<nav id="gift-subs-options">
<ul>
<li class="selected">
<label>
<input type="radio" name="subscription-period" value="3mths" checked />
<span class="period">3 months</span>
</label>
</li>
<li>
<label>
<input type="radio" name="subscription-period" value="6mths" />
<span class="period">6 months</span>
</label>
</li>
<li>
<label>
<input type="radio" name="subscription-period" value="12mths" />
<span class="period">12 months</span>
</label>
</li>
</ul>
</nav>
<div class="prices" data-period="3mths">A 1</div>
<div class="prices" data-period="6mths">B 1</div>
<div class="prices" data-period="12mths">C 1</div>
<div class="prices" data-period="3mths">A 2</div>
<div class="prices" data-period="6mths">B 2</div>
<div class="prices" data-period="12mths">C 2</div>
<div class="prices" data-period="3mths">A 2</div>
<div class="prices" data-period="6mths">B 2</div>
<div class="prices" data-period="12mths">C 3</div>
JS:
$(document).ready(function() {
$(".prices").hide();
$("input[name$='subscription-period']").click(function() {
var test = $(this).val();
$(".prices[data-period]='" + test + "'").show();
});
});
提琴是否要测试: http : //jsfiddle.net/calebo/cRKwY/
你给出的在语法上是错误的 。 您需要这样:
$(".prices[data-period='" + test + "']").show();
在刷新之前,还要隐藏其他div
。
$(".prices").hide();
完整代码:
$(document).ready(function() {
$(".prices").hide();
$("input[name$='subscription-period']").click(function() {
var test = $(this).val();
$(".prices").hide();
$(".prices[data-period='" + test + "']").show();
});
});
$(document).ready(function() {
$(".prices").hide();
$("input[name='subscription-period']").click(function() {
var test = $(this).val();
$(".prices[data-period ='" + test + "']").show();
});
});
使用以下内容:
$(document).ready(function() {
$(".prices").hide();
var defaultval=$("input[name$='subscription-period']").val();
$(".prices[data-period='" + defaultval + "'").show();
$("input[name$='subscription-period']").change(function() {
$(".prices").hide();
var test = $(this).val();
$(".prices[data-period='" + test + "'").show();
});
});
这是工作示例: http : //jsfiddle.net/cRKwY/2/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.