根据javascript中的价格和类别复选框隐藏和显示div

Question

我有一个div 安排，我在其中定义数据属性。就像我在带有数据属性的div 中显示产品列表一样，即data-category 和data-price。我想根据类别和价格复选框的选择隐藏和显示divs。 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 滑块，但我无法使用该过滤器。基本上，如果您从复选框中选择一个类别，比如说鞋子，那么应该只显示带有鞋子的 divs；然后，如果您使用价格一些开始和结束限制过滤结果，它应该显示鞋子类别divs 落在该特定范围内。没有超出范围。

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

Answer 1

由于“类别”在 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 );
    });
});