選択ラジオ ボタンの値に基づいて、同じデータ属性値を持つ複数の 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/