Javascript 为要筛选的类添加更多值

这是我的主脚本，它通过复选框过滤div

function change(){
    var checkboxes = document.getElementsByClassName('checkbox');
    var chekboxInputs = Array.from(checkboxes).map(a => a.querySelector('input'));
    var allAreUnselected = chekboxInputs.every(function(elem){
       return !elem.checked;
    });
    if(allAreUnselected){
       chekboxInputs.forEach(function(input){
          Array.from(document.querySelectorAll("." + input.getAttribute("rel"))).forEach(function(item){
              item.style.display = 'block';
          });
       });
    }
    else {
      chekboxInputs.forEach(function(input){
          Array.from(document.querySelectorAll("." + input.getAttribute("rel"))).forEach(function(item){
            item.style.display = input.checked ? 'block' : 'none';
          });
       });
    }
}
change();

这是我的html文件。在这个html中有复选框和潜水

<div class="filter">
    <div class="checkbox">
        <label><input type="checkbox" rel="canada" onchange="change()"/>Canada</label>
    </div>
    <div class="checkbox">
        <label><input type="checkbox" rel="china" onchange="change()"/>China</label>
    </div>
</div>

<div class="result">
    <div class="canada">
         <h1>Canada</h1>
         <h2>Jason</h2>
    </div>
    <div class="china">
         <h1>China</h1>
         <h2>Ni</h2>
    </div>
</div>

但在我的例子中，脚本只过滤一个值——城市。如何向div类添加其他筛选器。例如

<div class="checkbox">
        <label><input type="checkbox" rel="india" onchange="change()"/>India</label>
</div>
<div class="checkbox">
        <label><input type="checkbox" rel="programming" onchange="change()"/>Programming</label>
</div>

通过向类添加另一个值

<div class="india programming">...</div> 

---

添加多个CSS类可以工作，但当前代码将覆盖以前的style.display设置，使其有时从“无”变为“块”，即使“无”设置是正确的设置

以下是您可以使用的代码，基于您给出的第一个示例，以及另外一个包含加拿大和中国两类的结果：

功能改变{ 让results=Array.fromdocument.querySelectorAll'.result>div'； //隐藏所有结果 results.forEachfunction结果{ result.style.display='none'； }; //仅筛选满足所有要求的结果： Array.fromdocument.querySelectorAll'.filter输入[rel]：已选中'，函数输入{ const attrib=input.getAttribute'rel'； 结果=结果。过滤器功能结果{ 返回result.classList.containsattrib； }; }; //显示过滤后的结果： results.forEachfunction结果{ result.style.display='block'； }; } 改变 加拿大 中国 加拿大 杰森 中国 镍 中国和加拿大 倪杰森

---

我不明白你在找什么。添加类应该可以做到这一点。问题是什么？我想添加更多过滤器。例如，对于一个div，我想添加india和programming。但是当我写的时候。。。脚本不工作，当我写。。。脚本正在运行，因为类只有一个值。如果我添加了多个，则筛选器不起作用。我已将答案中的代码转换为可以运行的代码段。什么不适合你？你得到了什么？错误？非常感谢。我理解+1请编辑您的问题并准确无误。给出一个例子，以及你对它的期望。我不清楚你在这里说什么。结果是否可见的具体要求是什么？我需要制作过滤器，它将指定。例如，在我的例子中，如果我选择加拿大和中国，它将只显示一个类别为china canada的div，另一个将隐藏，因为他们的类别没有类别china canada。我能解释一下我的问题吗？请在你的问题中添加这一重要信息。有几种解释过滤器的方法。我现在更新了我的答案。