將多維數組鍵/值與多個數據屬性/值進行動態比較

我有多個選擇設置爲篩選器以過濾（隱藏/顯示）頁面特定部分內的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

我想寫這將迭代函數如果數據key（s）不在過濾器[key]值中，則隱藏div。

因此在上面的示例中，John Doe將被隱藏，因爲他的data-titleLevel和data-titleFunction未包含在過濾器數組中。數據屬性值中存在重疊，因此將它們組合成單個數組是不可能的，並且遺留代碼阻止了我暫時改變它。

我的挑戰是創建一個Javascript（或jQuery）函數，該函數可以動態地將一個或多個過濾器與數據屬性與匹配鍵進行比較。我已經能夠讓過濾器爲/或者而不是動態地過濾多個過濾器，除非我硬編碼它。

我看着.some()，但仍然用邏輯和其他SO「陣列陣列」解決方案打牆like this和this，但我發現他們似乎並沒有完全解決這個問題。

編輯： 我已決定的數據屬性與值爲JSON與符合過濾條件的鍵的鍵的單個數據屬性組合;也許這會使比較更容易。在我工作時仍然在尋找解決方案。

來源

2016-02-12 Andrew

你能分享一個數組的樣本（2d）和它應該處理的標記來隱藏和顯示基於這個2d數組的值嗎？ – gurvinder372

嗯，這是我的嘗試。我不知道你的過濾器來自哪裏，但如果它們是動態的，我希望它們在一個對象中。有了這個假設我犯了一個solution.I'm也猜你已經找到一種方法來組織的div到對象

的一個數組所以assumming是

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

下面的代碼應該讓你的對象已過濾的divs

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

這不是一個完整的解決方案，但我希望它可以幫助您開始。

來源

2016-02-12 05:55:09

過濾器來自2個引導程序選擇字段，專用於要過濾的特定部分。我編輯了原始代碼，將所有可過濾的數據放入div中的單個數據屬性（如JSON）中。 data屬性中的鍵將與篩選鍵匹配。我認爲這會使篩選器[鍵]值與數據屬性[鍵]值之間的比較更容易。也許這將使篩選器方法更容易搜索數據屬性以匹配key => value（s）。 – Andrew

將多維數組鍵/值與多個數據屬性/值進行動態比較

回答

相關問題