При фильтрации с помощью флажков в JQuery, как искать в полной строке атрибута данных, а не просто в точном соответствии?

Question

Я работаю над фильтрацией элементов через атрибуты данных с флажками.Пока он работает, ища пустые флажки, соединяя их с соответствующим элементом через атрибуты данных и показывая только остальные (то есть элементы, связанные с установленным флажком).

У меня есть три категории.

• Регионы: APAC, EMEA, Америка (всегда будет один и только один из них)

  Тип: Elite,Предпочтительный, авторизованный (всегда будет один и только один из них)

  Страны: Аргентина, Бразилия, Мексика (может иметь более одного из них)

Код, который я до сих пор использовал в Fiddle ниже, прекрасно работает для регионов и типов, потому что он довольно прост, когда есть только одна возможность.

Однако проблема возникает со странами, когда их больше, чемодин.

Например, в Fiddle, если вы снимите флажок с Бразилии, серый с только Бразилией, поскольку ее страна исчезнет (и вернется, если вы проверите ее).Это здорово.

Но если вы снимите галочку с Аргентина и Бразилия, синий с надписью "Аргентина, Бразилия" НЕ исчезнет.

Есть ли способ обновить 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();