复选框按类别过滤效果不佳

如何解决复选框按类别过滤效果不佳

我对带有复选框的过滤器有疑问。复选框过滤器具有4个类别（国家，类型，邮件和州），当我从2个类别中选择一个或多个项目（例如国家和邮件）时工作正常，但是当我选择第三或第四类项目时显示错误结果。 我按名称过滤类别，然后将结果与4 data- [categoryName]分组。 我不知道jQuery是否仅适用于2类，还是我需要添加更多验证。

这是我的代码：

$('.column input:checkbox').click(function() {
  if ($('input:checkbox:checked').length) {
    var arrSelected = [];
    var arrTypes = [];
    $('input:checkbox:checked').each(function() {
      if (arrSelected[$(this).prop('name')] == undefined) {
        arrSelected[$(this).prop('name')] = [];
      }
      arrSelected[$(this).prop('name')].push($(this).val());
      if ($.inArray($(this).prop('name'),arrTypes) < 0) {
        arrTypes.push($(this).prop('name'));
      }
    });
    $('.myContent').each(function() {
      $(this).hide();
      var intKeyCount = 0;
      for (key in arrTypes) {
        var blnFound = false;
        for (val in arrSelected[arrTypes[key]]) {
          if ($(this).attr('data-' + arrTypes[key]).indexOf(arrSelected[arrTypes[key]][val]) > -1) {
            blnFound = true;
            break;
          }
        }
        if (blnFound) {
          intKeyCount++;
        }
      }
      if (intKeyCount > 0 && intKeyCount != arrTypes.length - 1) {
        $(this).show();
      }
    });
  } else {
    $('.myContent').show();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="filter">
  <div class="column">
    <h3>Countries</h3>
    <input type="checkbox" id="spain" name="country" value="spain"> Spain<br>
    <input type="checkbox" id="portugal" name="country" value="portugal"> Portugal<br>
    <input type="checkbox" id="france" name="country" value="france"> France<br>
    <input type="checkbox" id="italy" name="country" value="italy"> Italy<br>
    <input type="checkbox" id="others" name="country" value="others"> Other countries<br>
  </div>

  <div class="column">
    <h3>Order type</h3>
    <input type="checkbox" id="web" name="type" value="web"> WEB<br>
    <input type="checkbox" id="b2b" name="type" value="b2b"> B2B<br>
    <input type="checkbox" id="shop" name="type" value="shop"> Shop<br>
  </div>

  <div class="column">
    <h3>Email</h3>
    <input type="checkbox" id="ok" name="mail" value="ok"> Sent<br>
    <input type="checkbox" id="ko" name="mail" value="ko"> Not sent<br>
  </div>

  <div class="column">
    <h3>Order state</h3>
    <input type="checkbox" id="ready" name="state" value="ready"> Ready<br>
    <input type="checkbox" id="waiting" name="state" value="waiting"> Waiting<br>
    <input type="checkbox" id="nonstock" name="state" value="nonstock"> No Stock<br>
  </div>
</div>

<div class="content">
  <br><span class="myContent" data-country="spain" data-type="web" data-mail="ok" data-state="ready">WebOrder1 - Spain</span>
  <br><span class="myContent" data-country="portugal" data-type="web" data-mail="ko" data-state="waiting">WebOrder2 - Portugal</span>
  <br><span class="myContent" data-country="others" data-type="shop" data-mail="ko" data-state="nonstock">ShopOrder1 - Germany</span>
  <br><span class="myContent" data-country="spain" data-type="b2b" data-mail="ko" data-state="waiting">B2BOrder1 - Spain</span>
  <br><span class="myContent" data-country="italy" data-type="web" data-mail="ok" data-state="nonstock">WebOrder3 - Italy</span>
  <br><span class="myContent" data-country="spain" data-type="web" data-mail="ko" data-state="waiting">WebOrder4 - Spain</span>
  <br><span class="myContent" data-country="france" data-type="web" data-mail="ko" data-state="ready">WebOrder5 - France</span>
  <br><span class="myContent" data-country="portugal" data-type="shop" data-mail="ok" data-state="waiting">ShopOrder2 - Portugal</span>
  <br><span class="myContent" data-country="spain" data-type="shop" data-mail="ok" data-state="nonstock">ShopOrder3 - Spain</span>
  <br><span class="myContent" data-country="others" data-type="web" data-mail="ko" data-state="ready">WebOrder6 - Sweeden</span>
  <br><span class="myContent" data-country="others" data-type="shop" data-mail="ko" data-state="nonstock">ShopOrder4 - Norway</span>
  <br><span class="myContent" data-country="france" data-type="shop" data-mail="ko" data-state="waiting">ShopOrder5 - France</span>
  <br><span class="myContent" data-country="portugal" data-type="web" data-mail="ko" data-state="ready">ShopOrder6 - Portugal</span>
  <br><span class="myContent" data-country="italy" data-type="b2b" data-mail="ko" data-state="ready">B2BOrder2 - Italy</span>
</div>

解决方法

当前，您的代码不会检查用户选择的值是否匹配所有过滤器，它只会看到intKeyCount != arrTypes.length - 1的长度，如果为真，那么您只会显示特定的{{1} }。但是，您需要在此检查用户选择的值是否与所有数据过滤器匹配，然后仅显示该值。

因此，要解决此问题，您可以检查span是否等于intKeyCount的长度，因为这里您要存储所有选择的类型。另外，您需要arrTypes hide()不能对此进行说明。

演示代码 ：

spans

$('.column input:checkbox').click(function() {
  if ($('input:checkbox:checked').length) {
    $('.myContent').hide();
    var arrSelected = [];
    var arrTypes = [];
    $('input:checkbox:checked').each(function() {
      if (arrSelected[$(this).prop('name')] == undefined) {

        arrSelected[$(this).prop('name')] = [];
      }
      arrSelected[$(this).prop('name')].push($(this).val());

      if ($.inArray($(this).prop('name'),arrTypes) < 0) {
        arrTypes.push($(this).prop('name'));
      }

    })
    $('.myContent').each(function() {
      var intKeyCount = 0;
      for (key in arrTypes) {
        var blnFound = false;
        for (val in arrSelected[arrTypes[key]]) {
          if ($(this).attr('data-' + arrTypes[key]).indexOf(arrSelected[arrTypes[key]][val]) > -1) {
            blnFound = true;
            break;
          }
        }
        if (blnFound) {
          intKeyCount++;
        }
      }
      //check if the value of count is equal to arrTypes
      if ((intKeyCount > 0) && (intKeyCount == arrTypes.length)) {
        $(this).show(); //show
      } else {
        $(this).hide(); //hide
      }
    });


  } else {
    $('.myContent').show();
  }
});

.myContent{
font-family:monospace;
color:blue
}