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

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 slider ，但我无法使用该过滤器。基本上，如果您从复选框中选择一个类别，比如说鞋子，那么应该显示只有鞋子的 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 );
    });
});