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

Question

我对带有复选框的过滤器有疑问。复选框过滤器有 4 个类别（国家、类型、邮件和州），当我从 2 个类别（例如国家和邮件）中选择一个或多个项目时工作正常，但是当我选择第三个或第四个类别的项目时显示不正确的结果. 我按名称过滤类别，并用 4 个数据-[类别名称] 对结果进行分组。 我不知道 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>

Answer 1

目前，您的代码不会检查用户选择的值是否与所有过滤器匹配，它只会查看 intKeyCount != arrTypes.length - 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
}

<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>