Question

使用this code，如果您想处理多个数据属性该怎么办。例如，如果第一个可以是蓝色或红色，则其属性为data-colour="Blue, Red"。如何更新jQuery以处理此问题？换句话说，现在需要在整个data-value字符串中搜索data-colour，而不仅仅是精确匹配。

这在下面的代码中可行吗？

HTML：

<div data-brand="Nike" data-price="31" data-colour="Blue"  data-size="medium">
  Blue medium</div>
  <div  data-brand="Nike" data-price="31" data-colour="Blue"  data-size="medium">
  Blue medium</div>
  <div data-brand="Nike" data-price="31" data-colour="Blue" data-size="large">
  Blue large </div>
<div data-brand="Nike" data-price="31" data-colour="Red" data-size="small">
  Red Small</div>
  <div data-brand="Addidas" data-price="31" data-colour="Red" data-size="small">
  Red Small</div>
Colours: Blue <input type="checkbox" id="BlueCB" data-type="colour" data-value="Blue" checked> 
Red <input class="chbx" type="checkbox" id="RedCB" data-type="colour" data-value="Red" checked>
Brand: Nike <input type="checkbox" id="NikeCB" data-type='brand'  data-value='Nike' checked>
Size: Large<input type="checkbox" id="LargeCB" data-type="Size"  data-value='large' checked>
Size: Medium<input type="checkbox" id="MediumCB" data-type="Size"  data-value='medium' checked>

JS：

var $boxes = $('input[data-type]'), //all input boxes with data-type attribute
    $dataObjects =$(); //will be filled with all bound data elements
$boxes.each(function(ind, inp){     //create filter information
    var type = inp.dataset.type, value = inp.dataset.value; //for older browsers, use  $(inp).data('type')  
  var filter =  'div[data-' + type +'="' + value +'"]';     
  inp.dataset.filter = filter;
    $.merge($dataObjects,$(filter));
}); 

$boxes.change(function(){
    var blacklist = $boxes.filter(function(i,b){return !b.checked})
    .map(function(i,b){return b.dataset.filter}).toArray().join();
  $dataObjects.hide().not(blacklist).show();
});

Answer 1

您可能想阅读jQuery Selectors的页面。

OR很容易，您可以一个接一个地包含多个属性：

...filter("[data-colour*='red'][data-colour*='blue']")...

文本比较区分大小写。

关于filtering，您可以从现有列表中filter()个DOM元素，过滤其中的children()，用find()过滤后代，过滤{{ 1}}或parent()，甚至用parents()搜索所有内容（尽管我认为属性不适用于contents()）。

如何使用jQuery过滤处理多个数据属性？

1 个答案: