Как заставить Jquery проверять наличие полей CHECKED последними после проверки на NOT CHECKED?

Question

У меня есть флажки, чтобы отфильтровать, какие DIV появляются на странице.У меня есть код в этой скрипке , а также ниже.

Этот код работает, но проблема связана с флажками «Страна».Если вы снимите флажок «Аргентина», синий div исчезнет.Но он должен остаться, потому что у него также есть «Бразилия» и «Мексика» в области данных страны.

Другими словами, синий div должен исчезнуть только в том случае, если ВСЕ три флажка в поле «Страна» сняты.

Я считаю, что это происходит, потому что мой код сначала проходит через флажки CHECKED и показывает их, а затем проходит через флажки UNCHECKED и скрывает их.Таким образом, он видит, что Бразилия и Мексика проверены и показывает технически, показывает их на долю секунды, но затем сразу же видит, что Аргентина не проверена, поэтому она в конечном итоге скрывает это.

Моя мысль состояла в том, чтобы изменить порядок в том, как яцикл через, сначала НЕПРОВЕРЕННЫЙ, а затем ПРОВЕРЕННЫЙ.Так что я переключил это в Jquery, но он вообще перестал работать.Понятия не имею, почему это сломало бы это.

Если у кого-то есть какие-либо идеи о том, как сделать это правильно и / или как заставить это работать, если я изменю порядок того, как я зацикливаюсь, пожалуйста, дайте мне знать.

HTML:

<div class="Row sel" 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 sel" style="background: red;" data-region="APAC" 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 sel" style="background: blue;" data-region="EMEA" 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:

$('[type="checkbox"]').on('change', function () {
  $('[type="checkbox"]:checked').each( function (ind, inp) { //loop over checked checkboxes
    var type = inp.dataset.type, value = inp.dataset.value; 
    $('div[data-' + type +'*="' + value +'"]').show();  
  })
  $('[type="checkbox"]:not(:checked)').each( function (ind, inp) { //loop over unchecked checkboxes
    var type = inp.dataset.type, value = inp.dataset.value; 
    $('div[data-' + type +'*="' + value +'"]').hide();  
  })    

});

Answer 1

Вот одно из возможных решений:

Суть этого метода - сравнение двух массивов.
Я использую некоторые функции-прототипы, найденные в этом ответе пользователем Это я ... Алекс .

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

Я создаю массив проверенных значений, упорядоченный по типу в многомерном массиве.
Затем я сравниваю атрибуты каждого посредника с этими значениями.
Если проверено хотя бы одно значение каждого типа, отображается этот посредник..

Array.prototype.indexOfAny = function(array) {
  return this.findIndex(function(v) {
    return array.indexOf(v) != -1;
  });
}

Array.prototype.containsAny = function(array) {
  return this.indexOfAny(array) != -1;
}



function getAllChecked() {

  // build a multidimensional array of checked values, organized by type

  var values = [];
  var $checked = $checkboxes.filter(':checked');

  $checked.each(function() {

    var $check = $(this);
    var type = $check.data('type');
    var value = $check.data('value');

    if (typeof values[type] !== "object") {
      values[type] = [];
    }

    values[type].push(value);

  });

  return values;

}

function evaluateReseller($reseller, checkedValues) {

  // Evaluate a selected reseller against checked values.
  // Determine whether at least one of the reseller's attributes for
  // each type is found in the checked values.

  var data = $reseller.data();
  var found = false;

  $.each(data, function(prop, values) {

    values = values.split(',').map(function(value) {
      return value.trim();
    });

    found = prop in checkedValues && values.containsAny(checkedValues[prop]);

    if (!found) {
      return false;
    }

  });

  return found;

}


var $checkboxes = $('[type="checkbox"]');
var $resellers = $('.Row.sel');

$checkboxes.on('change', function() {

  // get all checked values.
  var checkedValues = getAllChecked();

  // compare each resellers attributes to the checked values.
  $resellers.each(function(k, reseller) {

    var $reseller = $(reseller);
    var found = evaluateReseller($reseller, checkedValues);

    // if at least one value of each type is checked, show this reseller.
    // otherwise, hide it.

    if (found) {
      $reseller.show();
    } else {
      $reseller.hide();
    }

  });

});

#reseller_allegiant {
  background: lightgreen;
}

#reseller_folco {
  background: pink;
}

#reseller_latin_telecom {
  background: lightblue;
}

#controls {
  text-align: left;
  max-width: 1000px;
  margin: 2em auto 0;
  padding-left: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="Row sel" id="reseller_allegiant" 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 sel" id="reseller_folco" data-region="APAC" 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 sel" id="reseller_latin_telecom" data-region="EMEA" 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 id="controls">
  <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>