过滤多个数据属性

Question

如何在此过滤器中从类过滤到数据过滤器？

从（链接：http://jsfiddle.net/ar3PY/2/）

class="filterme Audi Compact silver blue red" 

到（http://jsfiddle.net/ar3PY/95/）

class="filterme" data-filter="Audi Compact silver blue red" 

Answer 1

检查这方面的工作代码。

var getFilter = function (category) { 
 
    var filter = $("#filters ." + category + ":checked").map(function() { 
 
     return '[data-filter*="' + this.value + '"]'; 
 
    }).get().join(","); 
 
    filter = (filter.length > 0) ? filter : "*"; 
 
    return filter; 
 
} 
 

 
$("#filters :checkbox").click(function() { 
 
    var all = $(".filterme"); 
 
    var tgts = all.filter(getFilter("brand")).filter(getFilter("class")).filter(getFilter("color")); 
 
    all.not(tgts).hide(); 
 
    tgts.show(); 
 
});

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<p><strong>Find the right model: </strong>Select one or more checkboxes to filter your choice:</p> 
 

 

 
<table id="filters" width="620px"> 
 
    <tr> 
 
     <td width="144" align="left" valign="top"> 
 
      <input type="checkbox" class="brand" value="Audi" id="filter-Audi">Audi<br> 
 
      <input type="checkbox" class="brand" value="BMW" id="filter-BMW">BMW<br> 
 
     </td> 
 
     <td width="233" align="left" valign="top"> 
 
      <input type="checkbox" class="class" value="Compact" id="filter-Compact">Compact<br> 
 
      <input type="checkbox" class="class" value="Limousine" id="filter-Limousine">Limousine<br> 
 
      <input type="checkbox" class="class" value="SUV" id="filter-SUV">SUV<br> 
 
      <input type="checkbox" class="class" value="Sport" id="filter-Sport">Sport<br> 
 
     </td> 
 
     <td width="233" align="left" valign="top"> 
 
      <input type="checkbox" class="color" value="silver" id="filter-silver">silver<br> 
 
      <input type="checkbox" class="color" value="blue" id="filter-blue">blue<br> 
 
      <input type="checkbox" class="color" value="red" id="filter-red">red<br> 
 
      <input type="checkbox" class="color" value="white" id="filter-white">white<br> 
 
     </td> 
 
    </tr> 
 
</table> 
 

 

 
<div class="text"></div> 
 
<div id="log" style="width: 620px; line-height: 19px"></div> 
 

 
<!-- new Car 1 --> 
 

 
<div style="border-top: 1px dotted black; padding: 3px; width: 620px" class="filterme" data-filter="Audi Compact silver blue red"> 
 
    <strong>Audi A1</strong><br /> 
 
    Audi, Compact, silver, blue, red 
 
</div> 
 
<br /> 
 

 
<!-- new Car 2 --> 
 

 
<div style="border-top: 1px dotted black; padding: 3px; width: 620px" class="filterme" data-filter="BMW Compact red white"> 
 
    <strong>BMW 118i</strong><br /> 
 
    BMW Compact red white 
 
</div> 
 
<br /> 
 

 
<!-- new Car 3 --> 
 

 
<div style="border-top: 1px dotted black; padding: 3px; width: 620px" class="filterme" data-filter="Audi Limousine Sport silver blue red"> 
 
    <strong>Audi A4</strong><br /> 
 
    Audi Limousine Sport silver blue red 
 
</div> 
 
<br /> 
 

 
<!-- new Car 4 --> 
 

 
<div style="border-top: 1px dotted black; padding: 3px; width: 620px" class="filterme" data-filter="BMW SUV Sport white blue silver"> 
 
    <strong>BMW X3</strong><br /> 
 
    BMW SUV Sport white blue silver 
 
</div> 
 
<br /> 
 

 
<!-- new Car 5 --> 
 

 
<div style="border-top: 1px dotted black; padding: 3px; width: 620px" class="filterme" data-filter="Audi Sport Silver"> 
 
    <strong>Audi R8</strong><br /> 
 
    Audi Sport Silver 
 
</div> 
 
<br /> 
 

 
<!-- new Car 6 --> 
 

 
<div style="border-top: 1px dotted black; padding: 3px; width: 620px" class="filterme" data-filter="BMW Sport white silver blue"> 
 
    <strong>BMW Concept X</strong><br /> 
 
    BMW Sport white silver blue 
 
</div> 
 
<br />

Answer 2

如何显示检查过滤器，只为每个类别exacly相同属性的内容？

也看到图像的解释：

。

的jsfiddle位置： http://jsfiddle.net/ar3PY/104

。

<br> var getFilter = function (category) { 
var filter = $("#filters ." + category + ":checked").map(function() { 
    return '[data-filter*="' + this.value + '"]'; 
}).get().join(","); 
filter = (filter.length > 0) ? filter : "*"; 
return filter; 

}

$（ “＃过滤器：复选框”）。点击（函数（）{VAR 所有= $（ “filterme”）; VAR的TGT = all.filter（用getFilter（ （“color”））; all.not（tgts）.hide（）; tgts.show（）; }）; filter（getFilter（“class”））