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

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(filter) 中生成一个这样的数组：

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] 值中(s)，隐藏 div。

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

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

我研究了.some()，但在逻辑和其他 SO“阵列中的阵列”解决方案 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;
});

这不是一个完整的解决方案，但我希望它可以帮助您入门。