Question

我有多个选项设置为过滤器，以过滤（隐藏/显示）页面特定部分中的DOM元素。这些部分设置如下（简化）：

<section id="people">
    <div data-filtervals="{"titleLevel":["2"],"titleFunction":["4","13"]}">John Doe</div>
    .
    .
    .
    <div data-filtervals="{"titleLevel":["1"],"titleFunction":["2","3","10"]}">Sally Smith</div>
</section>

我的过滤器在console.log（过滤器）中生成这样的数组：

titleFunction: Array[2]
    0: "1"
    1: "2"
    length: 2
titleLevel: Array[3]
    0: "1"
    1: "2"
    2: "3"
    length: 3

我正在尝试编写一个函数来迭代#people > div的 .each ，如果数据 - key（s）不是在filter [key]值中，隐藏div。

因此，在上面的示例中， John Doe将被隐藏，因为他的data-titleLevel和data-titleFunction未包含在过滤器数组中。数据属性值存在重叠，因此无法将它们组合到单个数组中，遗留代码阻止我暂时改变它。

我的挑战更多是关于创建一个Javascript（或jQuery）函数，该函数可以使用匹配的键动态地将一个或多个过滤器与数据属性进行比较。除非我对其进行硬编码，否则我已经能够使过滤器适用于/或不动态过滤多个过滤器。

我调查了.some()，但是继续用逻辑和其他SO＆＃34;数组在数组＆＃34;解决方案like this和this但我发现他们似乎并没有完全解决这一挑战。

修改我决定将数据属性组合成单个数据属性，其值为JSON，其中键与过滤键匹配;也许这会使比较更容易。在我工作时仍在寻找解决方案。

Answer 1

这是我的尝试。我不知道你的过滤器来自哪里，但如果它们是动态的，我希望它们是一个对象。根据这个假设我做了一个解决方案。我也猜测你已经找到了将div组织成一个对象数组的方法

所以假设

var filters = {titleLevel:[1,2],titleFunction:[1,2,3]};
var divs = [{titleLevel:[2],titleFunction:[4,13]},{titleLevel:[1],titleFunction:[2,3,10]}];
var hasOverLap = function(arr1,arr2){   
    var flag = false;
    arr1.forEach((item)=>{
        if(arr2.indexOf(item) != -1){flag = true;}
    });
    return flag;
};

以下代码应该为您提供过滤div的对象

divs.filter(div=>{
    for(var key in div){
        if(!hasOverLap(div[key],filters[key])){
            return false;
        }
    }
    return true;
});

这不是一个完整的解决方案，但我希望它可以帮助你开始。

动态地将多维数组键/值与多个数据属性/值进行比较

1 个答案: