javascript - 艰难地使用带有类和for循环的switch语句(Having difficuly using a switch statement with classess and for loops)

Question

I'm trying to create a photo-view display similar to pintrest except there is a preference checkbox where you can choose the types of images you see.

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

The problem I'm having is that some of these images fall under multiple catergories, for example there might be a driving shot in the city, so I want that particular image to show if either the city checkbox or drivng images checkbox is clicked.

(我遇到的问题是这些图像中的某些图像属于多个类别，例如，在城市中可能会有开车的场景，因此我希望该特定图像显示是否单击“城市” checkbox或“驱动图像” checkbox 。)

Currently I have it so say for example, City checkbox is clicked and becomes unchecked , then all images with the city class get a class of displayNone which does the obvious.

(目前，我可以这样说，例如，单击City checkbox ，然后unchecked ，然后所有具有city class图像都会获得displayNone类，这很明显。)

But I want to make it so if it also has another class that is currently checked then it doesnt get the class of displayNone, only when all the classes of that particular image are unchecked is when that image gets the class of displayNone.

(但是我要这样做，以便如果它还具有当前checked另一个class ，则它不会获得displayNone的class ，只有当unchecked该特定图像的所有类时，才是该图像获得displayNone的class 。)

I know that the switch statement would be ideal for this scenario but I can't seem to figure out exactly how I'd implement it.

(我知道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");
                  }

              }
          } 
      }
  }

  ask by Josh McIntosh translate from so

Answer 1

Here's another take using CSS rules and just one event listener:

(这是使用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

(码笔)

The code is much more easy to extend : you just add a pair of label/input:checkbox (2 lines) in the form for each new class of images.

(该代码更易于扩展 ：您只需在表单中为每个新的图像类添加一对label / input：checkbox（2行）即可。)

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