通过 switch case 进行多重过滤

Question

我需要按卡片实现过滤器。我已经实现了按每种颜色进行过滤，但是如何按多个参数进行过滤？我使用 switch case 来过滤对象

每个复选框项对应一个数字。第一个复选框显示所有卡片。随后的每一个对应于数字和颜色。需要帮助如何过滤掉几个参数。例如第二个（绿色）和第三个（橙色）

let checkboxesSelectchecked = document.querySelectorAll(
  "input[type=checkbox][name=one]"
);

checkboxesSelectcheckedZones.forEach((item) => {
  item.addEventListener("change", () => {
  

    for (let i = 0; i < check.length; i++) {
      let supp = check[i];
      console.log(supp);
      switch (supp) {
        //all
        case "one": {
          colorgreen.forEach((i) => {
            i.classList.remove("collapse");
          });
          collororange.forEach((i) => {
            i.classList.remove("collapse");
          });
          colorgray.forEach((i) => {
            i.classList.remove("collapse");
          });
          colorred.forEach((i) => {
            i.classList.remove("collapse");
          });
          break;
        }
        //green
        case "two": {
          collororange.forEach((i) => {
            i.classList.add("collapse");
          });
          colorgray.forEach((i) => {
            i.classList.add("collapse");
          });
          colorred.forEach((i) => {
            i.classList.add("collapse");
          });
          colorgreen.forEach((i) => {
            i.classList.remove("collapse");
          });
          break;
        }
        //orange
        case "three": {
          colorgreen.forEach((i) => {
            i.classList.add("collapse");
          });
          colorgray.forEach((i) => {
            i.classList.add("collapse");
          });
          colorred.forEach((i) => {
            i.classList.add("collapse");
          });
          collororange.forEach((i) => {
            i.classList.remove("collapse");
          });
          break;
        }
        //red
        case "four": {
          colorgreen.forEach((i) => {
            i.classList.add("collapse");
          });
          colorgray.forEach((i) => {
            i.classList.add("collapse");
          });
          collororange.forEach((i) => {
            i.classList.add("collapse");
          });
          colorred.forEach((i) => {
            i.classList.remove("collapse");
          });
          break;
        }
        //gray
        case "five": {
          colorgray.forEach((i) => {
            i.classList.remove("collapse");
          });
          colorgreen.forEach((i) => {
            i.classList.add("collapse");
          });
          colorred.forEach((i) => {
            i.classList.add("collapse");
          });
          collororange.forEach((i) => {
            i.classList.add("collapse");
          });
          break;
        }
        default:
          console.log("def");
      }
    }
    }

Answer 1

默认情况下会选择 ShowAll，如果选择此选项，则不会过滤任何内容。您可以根据需要进行修改。

var showAll = true;
document.querySelectorAll(".all")[0].addEventListener("change", (e) => {
  showAll = e.target.checked;
  document.querySelectorAll('.card').forEach(card => card.classList.remove('collapse'));
  if (showAll) {
    //if showAll is selected then change the checkbox to true for other colors too
    document.querySelectorAll('input[type=checkbox]').forEach(e => e.checked = true);
  }

});
var checkboxes = document.querySelectorAll(".color");
checkboxes.forEach(checkbox => {
  checkbox.addEventListener("change", (e) => {
    var colorType = e.target.name;
    var checked = e.target.checked;
    var cards = document.querySelectorAll(`.${colorType}`);
    if (checked || showAll) {
      cards.forEach(card => card.classList.remove('collapse'));
    } else {
      cards.forEach(card => card.classList.add('collapse'));
    }
  })
})

.cards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.card {
  border-radius: 20%;
  margin: 16px;
  padding: 16px;
  height: 75px;
  width: 75px;
  border: 1px solid black;
}

.collapse {
  display: none;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

.orange {
  background-color: orange
}

<input type='checkbox' checked="true" class='all' name='all' /> all
<input type='checkbox' checked="true" class='color' name='red' /> red
<input type='checkbox' checked="true" class='color' name='blue' /> blue
<input type='checkbox' checked="true" class='color' name='green' /> green
<input type='checkbox' checked="true" class='color' name='orange' /> orange
<div class='cards'>
  <div class='card red'></div>
  <div class='card red'></div>
  <div class='card green'></div>
  <div class='card green'></div>
  <div class='card blue'></div>
  <div class='card blue'></div>
  <div class='card orange'></div>
  <div class='card orange'></div>
</div>

Answer 2

如果你想检查switch case 中的对象，那么在switch (true) 中。显示一个对象，使用obj [i] ===，搜索你可以使用includes

checkboxesSelectcheckedZones.forEach((item) => {
  item.addEventListener("change", () => {
  
    let check = Array.from(checkboxesSelectcheckedZones)
      .filter((i) => i.checked)
      .map((i) => i.id);

    for (let i = 0; i < check.length; i++) {
      let supp = check.map((i) => i);
      console.log(supp);

      switch (true) {
        //all
        case supp[i] === "one": {
          colorgreen.forEach((i) => {
            i.classList.remove("collapse");
          });
          collororange.forEach((i) => {
            i.classList.remove("collapse");
          });
          colorgray.forEach((i) => {
            i.classList.remove("collapse");
          });
          colorred.forEach((i) => {
            i.classList.remove("collapse");
          });
          break;
        }
        //green
        case supp[i] === "two": {
          collororange.forEach((i) => {
            i.classList.add("collapse");
          });
          colorgray.forEach((i) => {
            i.classList.add("collapse");
          });
          colorred.forEach((i) => {
            i.classList.add("collapse");
          });
          colorgreen.forEach((i) => {
            i.classList.remove("collapse");
          });
          break;
        }
        case supp.includes("two") && supp.includes("three"): {
          colorgray.forEach((i) => {
            i.classList.add("collapse");
          });
          colorred.forEach((i) => {
            i.classList.add("collapse");
          });
          collororange.forEach((i) => {
            i.classList.remove("collapse");
          });
          colorgreen.forEach((i) => {
            i.classList.remove("collapse");
          });
          break;
        }

     
        }