文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >Checkbox filter by categories不起作用

问Checkbox filter by categories不起作用
EN

Stack Overflow用户
提问于 2020-08-25 19:10:56
回答 1查看 107关注 0票数 1

我对带有复选框的筛选器有问题。checkbox筛选器有4个类别(国家、类型、邮件和州)，当我从两个类别(例如国家和邮件)中选择一个或多个项目时，它可以正常工作，但当我选择第三个或第四个类别的项目时，显示不正确的结果。我按名称对类别进行筛选，并使用4数据类别名称对结果进行分组。我不知道jQuery是否只处理两个类别，或者我需要添加更多的验证。

下面是我的代码：

​

代码语言：javascript
复制
$('.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();
  }
});
代码语言：javascript
复制
<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>

​

html
jquery
css
filter
EN

回答 1

Stack Overflow用户

发布于 2020-08-25 23:16:26

目前你的代码不检查用户选择的值是否匹配所有的过滤器，如果是真的，那么你只是显示特定的span.But，这里你需要检查用户选择的值是否与所有的数据过滤器匹配，然后只显示这些值。

因此，为了解决这个问题，您可以检查intKeyCount是否等于arrTypes的长度，因为这里存储的是所有已选择的类型。此外，您还需要hide()那些不能满足这一要求的spans。

演示代码：

​

代码语言：javascript
复制
$('.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();
  }
});
代码语言：javascript
复制
.myContent{
font-family:monospace;
color:blue
}
代码语言：javascript
复制
<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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/63577576

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档