基于属性值筛选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(); 
      } 
     } 
    } 
} 

这个代码不工作笑，这是伪代码，但它清楚地表明一个物体的可用于多个属性值进行过滤。