javascript - 为类添加更多值以进行过滤

Question

这是我的主脚本，通过复选框过滤 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> 

Answer 1

添加多个 CSS 类可能有效，但您当前的代码将覆盖 style.display 的先前设置，使其有时从 none 变为 block，即使 none 设置是正确的设置。

以下是您可以使用的代码，基于您提供的第一个示例，以及具有“canada”和“china”类的附加结果:

function change(){
    let results = Array.from(document.querySelectorAll('.result > div'));
    // Hide all results
    results.forEach(function (result) {
        result.style.display = 'none';
    });
    // Filter results to only those that meet ALL requirements:
    Array.from(document.querySelectorAll('.filter input[rel]:checked'), function (input) {
        const attrib = input.getAttribute('rel');
        results = results.filter(function (result) {
            return result.classList.contains(attrib);
        });
    });
    // Show those filtered results:
    results.forEach(function (result) {
        result.style.display = 'block';
    });
}
change();

<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 class="canada china">
         <h1>China and Canada</h1>
         <h2>Ni Jason</h2>
    </div>
</div>

请注意，我假设 rel 属性只能引用一个 CSS 类。