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

Question

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

我有三类。

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

  类型：精英，首选，授权(始终是其中之一(

  国家：阿根廷，巴西，墨西哥(可以有多个(

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

但是，当有多个国家时，问题就出现在国家/地区。

例如，在小提琴中，如果您取消选中巴西，则只有巴西作为其国家的灰色将消失(如果您选中它，则会返回(。 真棒。

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

有没有办法更新下面的 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();