难于使用带有类和for循环的switch语句

问题描述 投票：0回答：3

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

我所遇到的问题是，其中一些图像属于多个类别，例如，在城市中可能会有开车的镜头，所以我希望该特定图像显示城市checkbox还是驾驶图像[ C0]单击。

[例如，我现在说，例如，单击城市checkbox并变为checkbox，然后所有带有城市unchecked的图像都将获得一类class，这显然是显而易见的。但是我想这样做，如果它还具有另一个当前为displayNone的class，那么它就不会获得displayNone的checked，只有当该特定图像的所有类都是class时，该图像才会displayNone的unchecked。

我知道switch语句对于这种情况将是理想的，但是我似乎无法确切地知道如何实现它。

class
javascript loops class switch-statement
3个回答
0
投票

第一次使用更改事件，而不是单击复选框。

JS

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

              }
          } 
      }
  }

HTML：删除父级div的无显示

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("change", drivingShotImgFunctionPintrest);

function drivingShotImgFunctionPintrest() {
    for (var i = 0; i < pImgDrivingShot.length; i++) {
        if (this.checked) {
            pImgDrivingShot[i].classList.remove('displayNone')

        } else {
            pImgDrivingShot[i].classList.add('displayNone');

        }
    }
}

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

function cyberPunkImgFunctionPintrest() {
    for (var i = 0; i < pImgCyberPunk.length; i++) {
        if (this.checked) {
            pImgCyberPunk[i].classList.remove("displayNone")


        } else {
            pImgCyberPunk[i].classList.add("displayNone");
        }
    }

}

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

function cityImgFunctionPintrest() {


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

}
0
投票

我将尝试减少Javascript代码中的循环数。我认为您确实需要相同的逻辑，但是样式中有一些变量。如果可以识别变量，则循环可以全部在一个地方处理。这是我解决问题的方法：

               <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">

 <!-- 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>
0
投票

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

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

drivingCheckBox.addEventListener("click", updateFromCheckbox);
cyberPunkCheckBox.addEventListener("click", updateFromCheckbox);
cityCheckBox.addEventListener("click", updateFromCheckbox);
function updateFromCheckbox(evt) {
    console.log('In updateFromCheckbox');
    var selector = "";  // The class that corresponds to the current checkbox
    var otherSelectors = [];    // Array of classes that correspond to the OTHER checkboxes
    var otherCheckboxes = [];   // The boolean settings of the OTHER checkboxes
    if (evt.currentTarget === drivingCheckBox) {
        selector = "pImgDrivingShot";
        otherSelectors = ["pImgCyberPunk", "pImgCity"];
        otherCheckboxes = [cyberPunkCheckBox.checked, cityCheckBox.checked];
    } else if (evt.currentTarget === cyberPunkCheckBox) {
        selector = "pImgCyberPunk";
        otherSelectors = ["pImgDrivingShot", "pImgCity"];
        otherCheckboxes = [drivingCheckBox.checked, cityCheckBox.checked];
    } else if (evt.currentTarget === cityCheckBox) {
        selector = "pImgCity";
        otherSelectors = ["pImgDrivingShot", "pImgCyberPunk"];
        otherCheckboxes = [drivingCheckBox.checked, cyberPunkCheckBox.checked];
    }

    // Safety check
    if (otherSelectors.length != otherCheckboxes.length) {
        console.log("otherSelectors AND otherCheckboxes ARE PARALLEL ARRAYS AND SHOULD BE THE SAME LENGTH!");
    }

    var images = document.querySelectorAll("img");
    for (var i = 0; i < images.length; i++) {
        var image = images[i];
        var isDisplayed = false;
        if (image.classList.contains(selector) && evt.currentTarget.checked) {
            isDisplayed = true;
        } else {
            for (var j = 0; j < otherSelectors.length; j++) {
                var otherSelector = otherSelectors[j];
                var otherCheckboxIsChecked = otherCheckboxes[j];
                if (image.classList.contains(otherSelector) && otherCheckboxIsChecked) {
                    isDisplayed = true;
                    break;
                }
            }
        }
        if (isDisplayed) {
            image.classList.remove("displayNone");
        } else {
            image.classList.add("displayNone");
        }
        console.log('Got one ', image.src, 'isDisplayed = ', isDisplayed, 'classList = ', image.classList);
    }
}

<!-- 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; } });

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

Codepen
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.