时间戳

首页 > 解决方案 > 难以使用带有类和 for 循环的 switch 语句

javascript - 难以使用带有类和 for 循环的 switch 语句

问题描述

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

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

目前我有这样的说法，例如，checkbox点击 City 并变成unchecked，然后所有带有城市的图像class都会得到一个displayNone明显的类。但是我想这样做，如果它还有另一个class当前存在，checked那么它不会获得classdisplayNone，只有当该特定图像的所有类都unchecked在该图像获得classdisplayNone 时。

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

              }
          } 
      }
  }

标签： javascriptloopsclassswitch-statement

解决方案

这是使用 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;
   }
});

密码笔

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

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

推荐阅读