javascript - 难以将 switch 语句与类和 for 循环一起使用

Question

我正在尝试创建一个类似于 pintrest 的照片 View 显示，除了有一个首选项复选框，您可以在其中选择您看到的图像类型。

我遇到的问题是，其中一些图像属于多个类别，例如，可能有城市中的驾驶镜头，所以我希望该特定图像显示是否城市复选框 或驱动图像复选框被单击。

目前我有这样的说法，例如，单击城市复选框并变为未选中，然后所有具有城市类的图像都会得到一个displayNone 类的作用显而易见。但我想让它这样，如果它还有另一个当前检查的class，那么它不会获得displayNone的class，只有当所有当该图像获取 displayNone 的 class 时，该特定图像的类未选中。

我知道 switch 语句非常适合这种情况，但我似乎无法确切地弄清楚如何实现它。

  HTML

  <!--PREFERENCE CHECKBOX-->
                      <div class = "preferanceCheckbox">
                          <form class ="formBox">
                              <div>
                            <input type="checkbox" class = "cBDrivingShot">
                              Driving Shots <br>
                              </div>
                            <input type="checkbox" class = "cBCyberPunkShot">
                              Cyberpunk <br>
                            <input type="checkbox" class = "cBcityRelated">
                              city related <br>
                           </form>
                       </div>


      <div class ="photoSectionAlignment pintrestView imgZ displayNone">

 <!-- CYBERPUNK SHOTS -->
          <img src="cyberPunkOne.jpg" class = "pImgCyberPunk pImgDrivingShot displayNone">                                     

          <img src="cyberPunkTwo.jpg" class = "pImgCyberPunk pImgCity displayNone">

          <img src="cyberPunkTwo.jpg" class = "pImgCyberPunk pImgtext displayNone">

 <!-- DRIVING SHOTS -->
         <img src="drivingShotOne" class = "pImgDrivingShot pImgCity displayNone">

         <img src="drivingShotTwo" class = "pImgDrivingShot pImgCity displayNone">

         <img src="drivingShotThree" class = "pImgDrivingShot pImgCyberPunk displayNone">

 <!-- CITY SHOTS -->
         <img src="cityShotOne" class = "pImg pImgCity displayNone">
    </div>


 CSS

 img {
 width: 200px;
 }

 .displayNone {
 display: none;
 }


  JAVASCRIPT  

  //GLOBAL VARIABLES
  //....................................................................

  var pintrestView = document.querySelector(".pintrestView");

  var dnPintrest = pintrestView.classList.contains("displayNone");


  // GLOBAL PREFERANCES CODE
  //..................................................................
  var drivingCheckBox = document.querySelector(".cBDrivingShot");
  var cyberPunkCheckBox = document.querySelector(".cBCyberPunkShot");
  var cityCheckBox = document.querySelector(".cBcityRelated");

  //PREFERANCES CODE
  //..................................................................

  // pintrest class variables
  var pImgDrivingShot = document.querySelectorAll(".pImgDrivingShot");
  var pImgCyberPunk = document.querySelectorAll(".pImgCyberPunk");
  var pImgCity = document.querySelectorAll(".pImgCity");

  //DRIVING SHOT FUNCTIONALITY
  drivingCheckBox.addEventListener("click",drivingShotImgFunctionPintrest);

 function drivingShotImgFunctionPintrest(){

     if (drivingCheckBox.checked === true){
         for (var i = 0; i < pImgDrivingShot.length; i++){
             if (pImgDrivingShot[i].classList.contains("displayNone")) {
                 pImgDrivingShot[i].classList.remove("displayNone");
             }
         }
     }else{
         if (drivingCheckBox.checked === false) {
             for (var i = 0; i < pImgDrivingShot.length; i++){ 
                 if (pImgDrivingShot[i].classList.contains("displayNone") === false) {
                     pImgDrivingShot[i].classList.add("displayNone");
                 }

             }
         }  
     }
 }

  //CYBERPUNK FUNCTIONALITY
  cyberPunkCheckBox.addEventListener("click",cyberPunkImgFunctionPintrest);

  function cyberPunkImgFunctionPintrest(){

     if (cyberPunkCheckBox.checked === true){
         for (var i = 0; i < pImgCyberPunk.length; i++){
             if (pImgCyberPunk[i].classList.contains("displayNone")) {
                 pImgCyberPunk[i].classList.remove("displayNone");
             }
         }
     }else{
         if (cyberPunkCheckBox.checked === false) {
             for (var i = 0; i < pImgCyberPunk.length; i++){ 
                 if (pImgCyberPunk[i].classList.contains("displayNone") === false) {
                     pImgCyberPunk[i].classList.add("displayNone");
                 }

             }
         }  
     }
 }

  //CITY FUNCTIONALITY
  cityCheckBox.addEventListener("click",cityImgFunctionPintrest);

  function cityImgFunctionPintrest(){

      if (cityCheckBox.checked === true){
          for (var i = 0; i < pImgCity.length; i++){
              if (pImgCity[i].classList.contains("displayNone")) {
                  pImgCity[i].classList.remove("displayNone");
              }
          }
      }else{
          if (cityCheckBox.checked === false) {
              for (var i = 0; i < pImgCity.length; i++){ 
                  if (pImgCity[i].classList.contains("displayNone") === false) {
                      pImgCity[i].classList.add("displayNone");
                  }

              }
          } 
      }
  }

Answer 1

这是使用 CSS 规则和一个事件监听器的另一种方法:

<!-- Place this inside your <head> -->
<style id="preferences"></style>
<!--PREFERENCE CHECKBOX-->
<div class = "preferanceCheckbox">
  <form class ="formBox">
      <input id="drive" type="checkbox" value=".pImgDrivingShot">
      <label for="drive">Driving Shots</label><br>
      <input id="cyber" type="checkbox" value=".pImgCyberPunk">
      <label for="cyber">Cyberpunk</label><br>
      <input id="city" type="checkbox" value=".pImgCity">
      <label for="city">City Related</label>
  </form>
</div>

<div class ="photoSectionAlignment pintrestView imgZ">
  <!-- CYBERPUNK SHOTS -->
  <img src="https://picsum.photos/id/1018/100/50" class = "pImgCyberPunk pImgDrivingShot displayNone">     <img src="https://picsum.photos/id/1022/100/50" class = "pImgCyberPunk pImgCity displayNone">
  <img src="https://picsum.photos/id/1023/100/50" class = "pImgCyberPunk pImgtext displayNone">
  <!-- DRIVING SHOTS -->
  <img src="https://picsum.photos/id/1041/100/50" class = "pImgDrivingShot pImgCity displayNone">
  <img src="https://picsum.photos/id/1015/100/50" class = "pImgDrivingShot pImgCity displayNone">
  <img src="https://picsum.photos/id/1019/100/50" class = "pImgDrivingShot pImgCyberPunk displayNone">
  <!-- CITY SHOTS -->
  <img src="https://picsum.photos/id/1080/100/50" class = "pImg pImgCity displayNone">
</div>

 .displayNone {
  display: none;
 }

const selected = {};
document.querySelector("form").addEventListener("click",(e)=>{
   if ( e.target.type === "checkbox" ){
     const cssClass = e.target.value;
     if (e.target.checked){
       selected[cssClass] = true;
     } else {
       delete selected[cssClass];
     };
     const cssRules = `${Object.keys(selected).join(",")}{ display: block !important; }`;
     document.querySelector("style#preferences").textContent = cssRules;
   }
});

Codepen

代码更容易扩展:您只需在表单中为每个新类别的图像添加一对标签/输入:复选框(2 行)。

      <input id="summer" type="checkbox" value=".pImgSummer">
      <label for="summer">Summer Related</label>