我正在尝试根据select单选按钮的值切换具有相同数据属性值的多个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/
答案 0 :(得分:6)
你所提供的是语法错误。你需要这样:
$(".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();
});
});
答案 1 :(得分:0)
$(document).ready(function () {
$(".prices").hide();
$("input[name$='subscription-period']").change(function () {
var test = this.value;
$(".prices").hide();
$(".prices[data-period='" + test + "']").show();
});
});
答案 2 :(得分:0)
$(document).ready(function() {
$(".prices").hide();
$("input[name='subscription-period']").click(function() {
var test = $(this).val();
$(".prices[data-period ='" + test + "']").show();
});
});
答案 3 :(得分:0)
使用以下内容:
$(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/