Question

我正在尝试使用div，JQuery和复选框上的data属性创建一个多重过滤器。当选中一个复选框时，我希望JQuery删除屏幕上的元素，该元素的数据属性不包含所有选定的项目。

例如，一个复选框'values ='mens'，另一个是'metal'，那么屏幕上与这些元素不匹配的元素将会淡化或隐藏。

以下是带有数据attrbute的示例div：

<div class="col-md-3 col-sm-4 shop-grid-item" id="BSG016BK" data-attributes='["men's","wayfarer","metal","134","133","black","black"]'></div>

过滤块包括：

<div class="information-blocks">
                    <div class="block-title size-2">Gender</div>
                    <label class="checkbox-entry">
                        <input type="checkbox" value="men's" class="filter" name="filter[]" /> <span class="check"></span> Men's
                    </label>
                    <label class="checkbox-entry">
                        <input type="checkbox" value="women's" class="filter" name="filter[]" /> <span class="check"></span> Women's
                    </label>
                    <label class="checkbox-entry">
                        <input type="checkbox" value="unisex" class="filter" name="filter[]" /> <span class="check"></span> Unisex
                    </label>
            </div>
            <div class="information-blocks">
                <div class="block-title size-2">Frame Material </div>
                <label class="checkbox-entry">
                    <input type="checkbox" value="metal" class="filter" name="filter[]" /> <span class="check"></span> Metal Frames
                </label>
                <label class="checkbox-entry">
                    <input type="checkbox" value="plastic" class="filter" name="filter[]" /> <span class="check"></span> Plastic Frames
                </label>
                <label class="checkbox-entry">
                    <input type="checkbox" value="wood" class="filter" name="filter[]" /> <span class="check"></span> Wood Frames
                </label>
            </div>

我正在使用：

$('.filter').on('click',function(){
            //
});

捕获选择值，但我不知道如何收集当前所选的所有值，然后使用该列表开始从不包含数据属性中的值的div中删除项目。

任何帮助都会非常感激，或者让我指出正确的方向。我一直在寻找教程和其他库，但我没有看到任何允许我使用多个源并过滤掉数据属性而不是类的东西。

Answer 1

首先，您必须将 shop-grid-item 属性更改为如下所示：

<div class="col-md-3 col-sm-4 shop-grid-item" id="BSG016BK" data-attributes="['men\'s','wayfarer','metal','134','133','black','black']">
</div>

之后，您只需获取适当的 数据属性 ，并与过滤器进行比较。

这里有JSFiddle在控制台中将属性显示为数组。

使用JQuery和Data属性进行MultiFiltering

1 个答案: