javascript - 在检查 NOT CHECKED 之后，如何强制 Jquery 最后检查 CHECKED 框？

Question

我有复选框来过滤页面上显示的 DIV。我在这个小提琴和下面都有代码。

此代码有效，但问题在于“国家/地区”复选框。如果取消选中“Argentina”，蓝色 div 就会消失。但它应该留下来，因为它的数据国家领域也有“巴西”和“墨西哥”。

换句话说，只有在“国家”下的所有三个复选框都未选中时，蓝色 div 才会消失。

我相信这是因为我的代码首先循环通过 CHECKED 复选框并显示它们，然后循环通过 UNCHECKED 复选框并隐藏它们。所以它看到巴西和墨西哥被检查并在技术上显示它们一瞬间，但随后立即看到阿根廷未被检查，所以它最终隐藏了它。

我的想法是颠倒我循环的顺序，即先循环通过 UNCHECKED 然后再 CHECKED。所以我在 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();  
  })    

});

标签： javascriptjqueryhtmlcheckboxdataset

Answer 1

这是一种可能的解决方案：

这种方法的关键是比较两个数组。
我正在使用用户在这个答案中找到的一些原型函数It's me ... Alex。

这个想法是将每个经销商的属性与检查的值进行比较。
仅当检查每种类型的至少一个属性时，才显示经销商。

我构建了一个检查值数组，按类型组织在一个多维数组中。
然后我将每个经销商的属性与这些值进行比较。
如果每种类型至少有一个值被选中，则会显示该经销商。

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>