0

ラジオ ボタンと jquery を使用してフィルターを作成しようとしています。

次のようなアイテムのリストがあります。

<ul class="all-options">
    <li class="1 a">
        <img src="path/to/image"/>
        <h3>Price</h3>
        <h2>$1000</h2>
    </li>
    <li class="1 b">
        <img src="path/to/image"/>
        <h3>Price</h3>
        <h2>$1500</h2>
    </li>
    <li class="2 a">
        <img src="path/to/image"/>
        <h3>Price</h3>
        <h2>$1200</h2>
    </li>
    <li class="2 b">
        <img src="path/to/image"/>
        <h3>Price</h3>
        <h2>$1300</h2>
    </li>
</ul>

次のラジオ ボタンからのユーザーの選択に基づいて、一度に 1 つの項目だけを表示したい:

<label>Numbers</label><br/>
    <input type="radio" name="number" value="1">1<br/>
    <input type="radio" name="number" value="2">2<br/>
<label>Letters</label><br/>
    <input type="radio" name="letter" value="a">a<br/>
    <input type="radio" name="letter" value="b">b

したがって、1 つの項目を表示するには、両方のクラスがラジオ ボタンの選択と一致する必要があることがわかっています。私はjqueryに非常に慣れていないので、誰かが私を正しい方向に向けてくれることを願っています.

4

2 に答える 2

0

動的な DOM インタラクションを実現するために、musefan コードをイベント リスナー (より正確には「change」イベント) にバインドしました。

$(function () {
  $('input[type="radio"]').on('change', function () {
    var number = $("[name='number']:checked").val();
    var letter = $("[name='letter']:checked").val();
    $("li").hide();
    $("li").filter(function (index) {
    return $(this).hasClass(number) && $(this).hasClass(letter);
    }).show();
  });
});

ここではjsFiddleです。

于 2013-07-19T16:26:13.323 に答える