Question

我正在进行div安排，我在其中定义数据属性。就像我在div中显示带有数据属性的产品列表，即data-category和data-price。我想根据类别和价格的复选框隐藏和显示div。 Html结构如下：

<div class="content" data-category="shoes" data-price="1000">shoe1</div><br />
<div class="content" data-category="shirts" data-price="1200">shirt1</div><br />

<div class="content" data-category="shoes" data-price="2000">shoe2</div><br />
<div class="content" data-category="shoes" data-price="800">shoe3</div><br />
<div class="content" data-category="shirts" data-price="1300">shirt2</div><br />
<div class="content" data-category="shirts" data-price="800">shirt3</div><br />

<input type="checkbox" class="category" category="shoes" id="shoes">shoes
<input type="checkbox" class="category" category="shirts" id="shirts">shirts

对于类别，我保留了复选框，但是对于价格，我需要使用范围jquery滑块我猜，但我无法使用该过滤器。基本上，如果您从复选框中选择一个类别，请说鞋子，那么只有鞋子的div才能显示;然后，如果您使用价格过滤结果某些开始和结束限制，则应显示属于该特定范围的鞋类div。不超出范围。

例如： - 我们选择鞋子复选框，它应该显示鞋子div;然后，如果我们选择范围为1000-2000，那么它应该显示shoe1和shoe2而不是shoe3。请帮忙。

Answer 1

由于“category”不是html中的有效属性名称，因此您应该使用其他内容。在这种情况下，直接使用id是很自然的，因为这是你需要的值：

<input type="checkbox" class="category" id="shoes">shoes
<input type="checkbox" class="category" id="shirts">shirts

对于范围，您可以这样：

<input type="radio" name="range" value="0-9000" checked>All
<input type="radio" name="range" value="0-999">0-1000
<input type="radio" name="range" value="1000-2000">1000-2000

然后在javascript：

$("input.category").prop("checked", true).change(function (e) {
    //Trigger change event on active price range item where the filter is applied
    $("input[name=range]:checked").trigger("change");
});
$("input[name=range]").change(function (e) {
    var toggle = this.checked;
    var range = this.value.split('-');
    var rangeFrom = parseInt(range[0]);
    var rangeTo = parseInt(range[1]);
    // If all category checkboxes are off we will ignore category filter
    var allOff = ($("input[type=checkbox]:checked").length === 0);
    $(".content[data-price]").each(function(){
        var $this = $(this);
        // Check if category is active
        var active = allOff || $("#" + $this.data("category")).prop("checked");
        // Get price as number
        var price = parseFloat($this.data('price'));
        // Toggle visibility based on category and price range
        $this.toggle(price >= rangeFrom && price <= rangeTo && active );
    });
});

在javascript中隐藏和显示基于价格和类别复选框的div

1 个答案: