使用 JQuery 中的复选框进行过滤时，如何在数据属性的完整字符串中进行搜索，而不仅仅是精确匹配？

Question

我正在研究通过带有复选框的数据属性来过滤元素。到目前为止，它的工作方式是寻找空白复选框，通过数据属性将它们与相应的元素配对，并只显示其他复选框（即与复选框关联的元素）。

我分三类。

地区：亚太地区、欧洲、中东和非洲、美洲（永远是其中之一）

类型：精英、首选、授权（永远是其中之一）

国家/地区： 阿根廷、巴西、墨西哥（可以有多个）

目前我在下面 Fiddle 中的代码适用于区域和类型，因为当只有一种可能性时它非常简单。

但是，当有多个国家时，问题就出现了。

例如，在 Fiddle 中，如果您取消选中巴西，则只有巴西作为其国家/地区的灰色那个消失（如果您选中它，则会返回）。太棒了

但是如果您取消选中阿根廷和巴西，带有 "Argentina, Brazil" 的蓝色不会消失。

有没有办法更新下面的 JQuery 来处理这个问题？本质上，它需要在完整的国家/地区数据字符串中的任意位置寻找国家/地区，而不仅仅是寻找完全匹配的国家/地区。

这对我来说似乎非常复杂，但希望有人能引导我朝着正确的方向前进。

https://jsfiddle.net/2xa1Lpet/9/

HTML:

<div class="Row" style="background: #eeeeee;" data-region="Americas" data-country="Brazil" data-tier="Elite Reseller">
<div class="Heading">Allegiant Technology</div>
<div class="Copy">Brazil</div>
<div class="Copy">Elite Reseller</div>
</div>

<div class="Row" style="background: red;" data-region="Americas" data-country="Mexico" data-tier="Preferred Reseller">
<div class="Heading">Folco Communications</div>
<div class="Copy">Mexico</div>
<div class="Copy">Preferred Reseller</div>
</div>
<div class="Row" style="background: blue;" data-region="Americas" data-country="Argentina, Mexico, Brazil" data-tier="Authorized Reseller">
<div class="Heading">Latin Telecom</div>
<div class="Copy">Argentina; Mexico; Brazil</div>
<div class="Copy">Authorized Reseller</div>
</div>


<div style="text-align:left; max-width: 1000px;  margin-left: auto;  margin-right: auto;  padding-left: 50px;">
<span class="title">Region:</span><br>
<input class="css-checkbox" type="checkbox" id="APAC" data-type="region" data-value="APAC" checked> 
<label for="APAC" class="css-label">APAC</label>
<input class="css-checkbox" type="checkbox" id="EMEA" data-type="region" data-value="EMEA" checked>
<label for="EMEA" class="css-label">EMEA</label>
<input class="css-checkbox" type="checkbox" id="Americas" data-type="region" data-value="Americas" checked>
<label for="Americas" class="css-label">Americas</label><br><br>
<span class="title">Partner Type:</span><br>
<input class="css-checkbox" type="checkbox" id="Preferred" data-type='tier'  data-value='Preferred Reseller' checked>
<label for="Preferred" class="css-label">Preferred</label>
<input class="css-checkbox" type="checkbox" id="Elite" data-type='tier'  data-value='Elite Reseller' checked>
<label for="Elite" class="css-label">Elite</label>
<input class="css-checkbox" type="checkbox" id="Authorized" data-type='tier'  data-value='Authorized Reseller' checked>
<label for="Authorized" class="css-label">Authorized</label>
<br>
<br>
<span class="title">Country:</span><br>
<input class="css-checkbox" type="checkbox" id="Argentina" data-type='country'  data-value='Argentina' checked>
<label for="Argentina" class="css-label">Argentina</label>
<input class="css-checkbox" type="checkbox" id="Brazil" data-type='country'  data-value='Brazil' checked>
<label for="Brazil" class="css-label">Brazil</label>
<input class="css-checkbox" type="checkbox" id="Mexico" data-type='country'  data-value='Mexico' checked>
<label for="Mexico" class="css-label">Mexico</label>
</div>

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

Attribute Contains Selector [name*=”value”]

jQuery( "[data-foo*='food']" ).addClass("sel")

.sel {background-color: yellow; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-foo="food">food</div>
<div data-foo="beer">food</div>
<div data-foo="beer, food">beer, food</div>
<div data-foo="beer, food, wine">beer, food, wine</div>
<div data-foo="beer, wine">beer, wine</div>

还有你的其他问题....

$('[type="checkbox"]').on('change', function () {
  $('[data-foo].sel).removeClass('sel'); // remove selections
  $('[type="checkbox"]:checked').each( function () { //loop over checked checkboxes
    var value = inp.dataset.value; //not sure why you are not using just value...
    $('[data-foo*="' + value + '"]').addClass('sel'); // find the attribute
  })
})

$('[type="checkbox"]').on('change', function() {
  $('div.actual').removeClass('actual');
  $('[type="checkbox"]:checked').each(function() {
    var inp = this
    var type = inp.dataset.type,
    value = inp.dataset.value;
    $('div[data-' + type + '*="' + value + '"]').addClass("actual");
  })
}).change();

使用 JQuery 中的复选框进行过滤时，如何在数据属性的完整字符串中进行搜索，而不仅仅是精确匹配？

When filtering with checkboxes in JQuery, how to search within a data-attribute's full string, rather than just an exact match?

javascript

jquery

filter

custom-data-attribute