基於屬性值篩選div jquery/javascript

Question

我正在尋找一種簡單的方法來基於屬性值來篩選內容。我有多個屬性，我使用複選框輸入來過濾內容。我的問題是，我沒有看到如何確保在第二個屬性之前驗證一個屬性。

我的意思是，我的屬性之一將是一個位置，我的第二個會是動作標籤。如果其中一個位置複選框被禁用，我不希望任何操作代碼覆蓋該位置。我不知道怎麼解離的檢查條件，如果（在下面的示例所示）「paris」被禁止，取消選中或選中「have a coffee」將使Result 1出現。

這裏是我現在所擁有的：

<div id="filtersContainer" class="tags"> 
    <div id="location" class="filcont"><h2>Mood</h2></div> 
    <div id="action" class="filcont"><h2>Action</h2></div> 
</div> 
</div> 

<div class="results"> 
     <div class="mark" location="paris" action="have-a-coffee eat">Result 1</div> 
     <div class="mark" location="lyon" action="drink have-a-coffee eat">Result 2</div> 
     <div class="mark" location="paris lyon" action="take-away drink eat">Result 3</div> 
     <div class="mark" location="grenoble paris" action="drink">Result 4</div> 
</div> 

$(document).ready(function() { 

    $("#filtersContainer").css('top', '-1000px') 

    //Building up filter options based on HTML data 
    dynamicFiltering(); 

    //Activating all filters 
    $('.mark').show(); 

    //On filter clicks 
    $('.tags').find('input:checkbox').on('click', function() { 
     $('.mark').hide(); 
     $('.tags').find('input:checked').each(function() { 
      $('.mark[location~="'+$(this).attr('rel')+'"]').show(); 
     }); 
    }); 

    $('.tags').find('input:checkbox').on('click', function() { 
      $('.mark').hide(); 
      $('.tags').find('input:checked').each(function() { 
       $('.mark[action~="'+$(this).attr('rel')+'"]').show(); 
      }); 
     }); 
    }); 

輸入元動態生成基於數據庫的內容。 它看起來是這樣，但：

<p class="check-tooltip">'+locationFilters[k]+'</p>'+ 
'<div class="checkboxing"><input type="checkbox" id="'+locationFilters[k]+'" checked rel="'+locationFilters[k]+'" />'+ 
'<label for="'+locationFilters[k]+'"></label></div>' 

更新的解決方案WORKING

$(document).ready(function() { 

    $("#filtersContainer").css('top', '-1000px') 

    //Building up filter options based on HTML data 
    dynamicFiltering(); 

    //Activating all filters 
    $('.mark').show(); 

    $('.tags').find('input:checkbox').on('click', function() { 
     var found = $.inArray($(this).attr('rel'), filterAre) > -1; 
     if(!found){ 
      filterAre.push($(this).attr('rel')); 
     } 
     else{ 
      removeA(filterAre, $(this).attr('rel')); 
     } 

     // console.log(filterAre); 
     filter(); 
    }); 
}); 

function filter(){ 
    // $(".mark").show(); 

    $.each(filterAre, function(index, value){ 
     $(".mark").each(function(){ 
      var rel = $(this).attr('filter-data'); 

      var array = rel.split(" "); 

      var count = 0; 


      for(var g=0; g<array.length; g++){ 
       var found = $.inArray(array[g], filterAre) > -1; 
       if(!found){ 
        $(this).hide(); 
        break; 
       } 
       else{ 
        $(this).show(); 
       } 
      } 
     }); 
    }); 
} 

function removeA(arr){ 
    var what, a= arguments, L= a.length, ax; 
    while(L> 1 && arr.length){ 
     what= a[--L]; 
     while((ax= arr.indexOf(what))!= -1){ 
      arr.splice(ax, 1); 
     } 
    } 
    return arr; 
} 

Answer 1

我做的按屬性過濾元素：

創建一個包含所需要的屬性的濾波器陣列顯示一個元素。

在過濾器點擊調用函數使用setfilter（），增加了/去除濾波器陣列的屬性名稱，然後調用函數過濾器（）。

的過濾器（）函數表示第一所有元素，並隨後循環槽所有爲每個屬性的元素，如果屬性不設置或不一定值隱藏的元素。

如果你想我可以張貼一些基本的代碼示例。

下面是一些基本的僞代碼（打電話）：

var filters = {}; 
function setFilter(filter, value, add) { 
    if(add) { 
     filters[filter] = value; 
    } else { 
     remove filters[filter] 
    } 
    filter(); 
} 
function filter() { 
    elements.show(); 
    foreach(filters as filter=>value) { 
     foreach(elements as element) { 
      if(element.attr(filter) != value) { 
       element.hide(); 
      } 
     } 
    } 
} 

這個代碼不工作笑，這是僞代碼，但它清楚地表明一個物體的可用於多個屬性值進行過濾。