Question

我有一大堆带有数据属性的元素。

<ul>
   <li data-brandid="1" data-finishid="5" data-typeid="10" data-constructionid="14">
   <li data-brandid="4" data-finishid="1" data-typeid="3" data-constructionid="7">
   <li data-brandid="18" data-finishid="2" data-typeid="1" data-constructionid="4">
   <li data-brandid="7" data-finishid="4" data-typeid="4" data-constructionid="5">
   <li data-brandid="4" data-finishid="8" data-typeid="1" data-constructionid="2">
   <li data-brandid="2" data-finishid="12" data-typeid="2" data-constructionid="16">
</ul>

在页面顶部，我有一个表单，其中包含每个属性的每个选项的复选框。他们可以为每个数据属性选择多个选项。因此，例如，如果他们选择了brandsid的2和5，finishid的1和4，typeid的4和2以及buildid的1和14，伪代码（SQL样式）将如下所示：

AND (brandid = 2 OR brandid = 5)
AND (finishid = 1 OR finishid = 4)
AND (typeid = 4 OR typeid= 2)
AND (constructionid = 1 OR 14)

但我不知道如何将其变成jquery选择器。

感谢。

Answer 1

你可以在jQuery中使用这样的模式 -

$('li[data-brandid^=1][data-finishid^=5]')

其中相应地查找由1和5组成的属性。

以下是您可以使用的代码段 -

＆＃13;

var choose = function(brandId, finishId, typeid, constructionid){
  // Search through brandid and finishid
  var sel = $('li[data-brandid^=' + brandId + '][data-finishid^='+ finishId +'][data-typeid^='+ typeid +'][data-constructionid^='+ constructionid +']')
  $('div').append(sel);
};

$('#go').on('click', function(){  
  var brandIds = [];
  var constructionIds = [];
  var typeIds = [];
  var finishIds = [];
  
  if($('#brandid').val().indexOf(',') != -1)
    brandIds = $('#brandid').val().split(',');
  
  if($('#finishid').val().indexOf(',') != -1)
    finishIds = $('#finishid').val().split(',');
  
  if($('#typeid').val().indexOf(',') != -1)
    typeIds = $('#typeid').val().split(',');
  
  if($('#constructionid').val().indexOf(',') != -1)
    constructionIds = $('#constructionid').val().split(',');
  
  
      
  $.each(brandIds, function(brInd, brand){
    $.each(finishIds, function(finId, finish){
      $.each(typeIds, function(typeId, type){
        $.each(constructionIds, function(conId, construction){
          choose(brand, finish, type, construction);
        });
      });          
    });    
  });  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Brand ID <input type="text" id="brandid" />
Finish ID <input type="text" id="finishid" />
Type ID <input type="text" id="typeid" />
Construction ID <input type="text" id="constructionid">

<button id="go">Go!</button>
<br/><br/>

Available (Brand - Finish - Type - Construction)
<ul>
  <li data-brandid="1" data-finishid="5" data-typeid="10" data-constructionid="14">1 - 5 - 10 - 14</li>
  <li data-brandid="4" data-finishid="1" data-typeid="3" data-constructionid="7">4 - 1 - 3 - 7</li>
  <li data-brandid="18" data-finishid="2" data-typeid="1" data-constructionid="4">18 - 2 - 1 - 4</li>
  <li data-brandid="7" data-finishid="4" data-typeid="4" data-constructionid="5">7 - 4 - 4 - 5</li>
  <li data-brandid="4" data-finishid="8" data-typeid="1" data-constructionid="2">4 - 8 - 1 - 2</li>
  <li data-brandid="2" data-finishid="12" data-typeid="2" data-constructionid="16">2 - 12 - 2 - 16</li>
</ul>

Selected (Brand - Finish - Type - Construction)
<div id="selected"></div>

＆＃13;

编辑：对于多个值，请使用$ .each

Answer 2

我刚刚写了一个像这样的过滤器，如果你知道如何开始它实际上很容易。

我们假设每个活动过滤器都有一个class="active"。我们进一步假设每个复选框都有一个数据属性，其中包含过滤器的名称（例如data-filter="brandid"）和一个数据属性，其中包含应该选择的值（例如data-value="1"）。

这假设我们可以开始构建函数

$items = $('li');

// Whenever a user changes a checkbox we want to filter our data
$('input[type="checkbox"]').change(function(){

    // We toggle the active-class to dis/enable our filter
    $(this).toggleClass('active');

    // We need an object holding our filters
    var filter = {};
    var $filtered = $items;

    // We select all active filter here and push them to the array
    $('input[type="checkbox"].active').each(function(){

        // When a filter with this type didnt exists in our object we create a new one
        if(filters[$(this).data('filter')] === undefined) filters[$(this).data('filter')] = {};

        // Then we push the filter to our array
        filters[$(this).data('filter')].push($(this).data('value'));

    });

    // We loop through every filter, select all elements which match the
    // filter and apply it to the $filtered selection
    // The items left is the desired collection
    for(var i in filters){

        // For every filter in our object
        // (which can hold multiple filters of one type)
        // we build a selector.
        // We join the selectors using `,` to get an `or`-selection
        selector = filters[i].map(function(value){
            return '[data-'+i+'="'+value+'"]';
        }).join(',');

        // Apply the filter
        $filtered = $filtered.filter(selector);
    }

    // $filtered now holds all elemets left
    // do with this elements what you want

}

Jquery高级过滤元素

2 个答案: