0

I'm trying to create a filter using radio buttons and jquery.

I have a list of items like the following:

<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>

I want to view just ONE item at a time, based on the user's selection from the following radio buttons:

<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

So, in order for one item to be shown, I know that BOTH classes would have to match the selection of the radio buttons. I'm very new to jquery though, so I'm hoping someone can point me in the right direction.

4

2 回答 2

1

这可能不是最有效的方法，但这是我想到的第一件事，并且有效：

假设您有一个带有id="apply"...的过滤器按钮

$("#apply").click(function (e) {
    e.preventDefault();
    var number = $("[name='number']:checked").val();
    var letter = $("[name='letter']:checked").val();
    $("li").hide();
    $("li[class='" + number + " " + letter + "']").show();
});

这是一个工作示例

更好的版本

如果您的li元素有任何其他类，上述将失败，这是使用 JQuery 方法的替代filter方法：

$("#apply").click(function (e) {
    e.preventDefault();
    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();
});

这是一个工作示例

您可以将此逻辑应用于任何事件，例如change单选按钮...

$("input[type='radio']").change(function () {
    var number = $("[name='number']:checked").val();
    var letter = $("[name='letter']:checked").val();
    //check if both radios have selected values before proceeding
    if (!number || !letter) return;
    $("li").hide();
    $("li").filter(function (index) {
        return $(this).hasClass(number) && $(this).hasClass(letter);
    }).show();
});

这是一个工作示例

当然，如果您的任何numbers 是，0那么它们将不会通过当前的值检查。

于 2013-07-19T16:07:27.420 回答
0

我只是将 musefan 代码绑定到事件侦听器（更准确地说，是“更改”事件），以便进行动态 DOM 交互：

$(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 回答