0

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

4

4 に答える 4

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();
    });
});

フィドル: http://jsfiddle.net/praveenscience/Lgk7B/

于 2013-10-17T06:02:34.180 に答える
0

アトリビュート イコール セレクターの読み取り

デモ

$(document).ready(function () {
    $(".prices").hide();

    $("input[name$='subscription-period']").change(function () {
        var test = this.value;
        $(".prices").hide();
        $(".prices[data-period='" + test + "']").show();
    });
});
于 2013-10-17T06:03:28.230 に答える