Question

我正在尝试使用单选按钮和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>

我想根据用户从以下单选按钮中的选择，一次只查看一个项目：

<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

因此，为了显示一个项目，我知道BOTH类必须匹配单选按钮的选择。我对jquery很新，所以我希望有人能指出我正确的方向。

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

Here is a working example

更好的版本

如果您的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();
});

Here is a working example

您可以将此逻辑应用于任何事件，例如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();
});

Here is a working example

当然，如果您number中的任何0是{{1}}，那么他们就不会通过值检查。

Answer 2

我只是将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。

使用单选按钮和jquery按多个类过滤

2 个答案: