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

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

---

例如：-我们选中了shoes复选框，它应该显示shoe div；然后，如果我们选择范围为1000-2000，那么它应该显示shoe1和shoe2，而不是shoe3。请对此提供帮助。

因为类别在html中不是有效的属性名称，所以您应该使用其他名称。在这种情况下，直接使用id是很自然的，因为这是您需要的值：

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

对于range，您可以有如下内容：

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

---

看起来不错，不过我会添加$.category.propchecked，true；去吧。因为它看起来很奇怪，让他们默认不检查。是的。那很好。你的一些建议side@awe和@Deja Vu。如果我们有一个新的数据属性，比如品牌。然后如果我们想过滤掉它。就像你检查了衬衫的类别，然后你选择了一些品牌，然后你选择了价格。然后如何过滤。第二，代替价格的复选框。如何使用价格范围滑块..？ThanksIt可以在单独的函数中移出筛选代码，然后从所有不同类型的筛选选择中调用相同的筛选函数。这样可以确保在所有情况下应用正确的过滤器。使用相同的方法过滤其他值。重要的是扫描所有带有$.content[data price]的项目，并读取需要使用的所有筛选控件的当前状态$这表示每个循环中有一个内容项。非常感谢@awe提供的宝贵信息。请给我一个带有价格范围滑块功能的类别复选框示例。如果您有空，我将尝试使用此项。您可以自己尝试解决。我不熟悉的滑块控制，但方法应该是类似的。只需将滑块值读入rangeFrom和rangeTo，然后使用相同的方法。