使用条件HTML选择页面上的显示/隐藏元素

Question

这很可能是重复的，但是我找不到可以帮助我的片段

我有一个带有多个图像和两个选择字段的页面。我想根据选择用户不同图像的选择来显示。对于个人选择，这很容易，但是如何在两个选择方面都能以简单的方式达到依赖性呢？

示例：
页面上的项目：“ A B”，“ A”，“ B”
用户选择：
首先选择：a
第二选择：B
结果：“ A B”

用户选择：
首先选择：a
第二选择：空
结果：“ A”

我认为您明白了。

我发现的几个片段是用jQuery制成的，我真的很想避免使用jQuery，只使用香草JS。

我当前的方法：

let redShown;
let blueShown;
let greenShown;

let oneShown;
let twoShown;
let threeShown;


// ColorFilter
function colorFilter(select) {
  if (select.value == "red") {
    redShown = true;
    blueShown = false;
    greenShown = false;
    // Show Red
    for (let i = 0; i < document.querySelectorAll(".box.red").length; i++) {
      document.querySelectorAll(".box.red")[i].style.display = "inherit";
    }
    // Hide everything else than red
    for (let i = 0; i < document.querySelectorAll(".box:not(.red)").length; i++) {
      document.querySelectorAll(".box:not(.red)")[i].style.display = "none";
    }
  } else if (select.value == "blue") {
    blueShown = true;
    redShown = false;
    greenShown = false;
    // Show Blue
    for (let i = 0; i < document.querySelectorAll(".box.blue").length; i++) {
      document.querySelectorAll(".box.blue")[i].style.display = "inherit";
    }
    // Hide everything else than blue
    for (let i = 0; i < document.querySelectorAll(".box:not(.blue)").length; i++) {
      document.querySelectorAll(".box:not(.blue)")[i].style.display = "none";
    }
  } else if (select.value == "green") {
    greenShown = true;
    redShown = false;
    blueShown = false;
    // Show Green
    for (let i = 0; i < document.querySelectorAll(".box.green").length; i++) {
      document.querySelectorAll(".box.green")[i].style.display = "inherit";
    }
    // Hide everything else than green
    for (let i = 0; i < document.querySelectorAll(".box:not(.green)").length; i++) {
      document.querySelectorAll(".box:not(.green)")[i].style.display = "none";
    }
  }
}



// Numberfilter
function numberFilter(select) {
  if (select.value == "one") {
    oneShown = true;
    twoShown = false;
    threeShown = false;
    // Show 1 
    for (let i = 0; i < document.querySelectorAll(".box.one").length; i++) {
      document.querySelectorAll(".box.one")[i].style.display = "inherit";
    }
    // Hide everything else than 1
    for (let i = 0; i < document.querySelectorAll(".box:not(.one)").length; i++) {
      document.querySelectorAll(".box:not(.one)")[i].style.display = "none";
    }
  } else if (select.value == "two") {
    oneShown = false;
    twoShown = true;
    threeShown = false;
    // Show 2
    for (let i = 0; i < document.querySelectorAll(".box.two").length; i++) {
      document.querySelectorAll(".box.two")[i].style.display = "inherit";
    }
    // Hide everything else than 2
    for (let i = 0; i < document.querySelectorAll(".box:not(.two)").length; i++) {
      document.querySelectorAll(".box:not(.two)")[i].style.display = "none";
    }
  } else if (select.value == "three") {
    oneShown = false;
    twoShown = false;
    threeShown = true;
    // Show 3
    for (let i = 0; i < document.querySelectorAll(".box.three").length; i++) {
      document.querySelectorAll(".box.three")[i].style.display = "inherit";
    }
    // Hide everything else than 3
    for (let i = 0; i < document.querySelectorAll(".box:not(.three)").length; i++) {
      document.querySelectorAll(".box:not(.three)")[i].style.display = "none";
    }
  }
}

.flex-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
 }
 
 .box {
   width: 100px;
   height: 100px;
   margin: 10px;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 2rem;
   
 }
 
 .box.red {
   background: red;
 }
 
 .box.green {
   background: green;
 }
 
 .box.blue {
   background: blue;
 }

<select id="colorSelect" onchange="colorFilter(this)">
  <option disabled selected value="">Color</option>
  <option value="red">Red</option>
  <option value="blue">Blue</option>
  <option value="green">Green</option>
</select>

<select id="numberSelect" onchange="numberFilter(this)">
  <option disabled selected value="">Number</option>
  <option value="one">1</option>
  <option value="two">2</option>
  <option value="three">3</option>
</select>


<div class="flex-wrapper">
  <div class="box red one">1</div>
  <div class="box red two">2</div>
  <div class="box red three">3</div>
  <div class="box blue one">1</div>
  <div class="box blue two">2</div>
  <div class="box blue three">3</div>
  <div class="box green one">1</div>
  <div class="box green two">2</div>
  <div class="box green three">3</div>
</div>

现在，选择彼此之间的覆盖，因此它们不同时工作。

我的代码也很复杂，因为我手工写出所有可能的组合。为此，必须有一个较短的版本。

Answer 1

您可以根据选择和颜色选择的数字值的更改值，将同一事件侦听器连接到每个框的选择和设置显示属性。 PS：我对HTML进行了一些调整，因此更容易访问box'变量（添加了为颜色值和数字值的颜色值和数据数属性的添加数据色属性）。此外，我已将数字键值从“一个”，“两个”和“三”更改为“ 1”，“ 2”和“ 3”。另外，该代码100％没有jQuery :-)

请参阅下面的实现：

let colorSelect = document.getElementById('colorSelect');
let numberSelect = document.getElementById('numberSelect');
let boxWrapper = document.getElementById('boxWrapper');

function handleChange() {
  // Get new values for changed color
  // and changed number which user selected
  let changedColor = colorSelect.value;
  let changedNumber = numberSelect.value;
  
  // Get the list of all boxes inside our box wrapper div
  let boxes = boxWrapper.querySelectorAll('.box');
  
  // For each box check whether its display property
  // should be 'block' or 'none' based on changed values
  // in colorSelect and numberSelect
  boxes.forEach(box => {
    // Get color and number values from the current box
    let color = box.getAttribute('data-color');
    let number = box.getAttribute('data-number');
    
    // Check whether current box color and number values
    // comply to user changed values in selects
    let isColorValid = !changedColor || changedColor === color;
    let isNumberValid = !changedNumber || changedNumber === number;
    
    // If both color and number values comply - display the box
    // otherwise hide the box using display: none
    if (isColorValid && isNumberValid) {
        box.style.display = 'block';
    } else {
        box.style.display = 'none';
    }
  })
}

// Attach listeners to both colorSelect and numberSelect
colorSelect.addEventListener('change', () => handleChange());
numberSelect.addEventListener('change', () => handleChange());

.flex-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
 }
 
 .box {
   width: 100px;
   height: 100px;
   margin: 10px;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 2rem;
   
 }
 
 .box.red {
   background: red;
 }
 
 .box.green {
   background: green;
 }
 
 .box.blue {
   background: blue;
 }

<select id="colorSelect">
  <option disabled selected value="">Color</option>
  <option value="red">Red</option>
  <option value="blue">Blue</option>
  <option value="green">Green</option>
</select>

<select id="numberSelect">
  <option disabled selected value="">Number</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<div class="flex-wrapper" id="boxWrapper">
  <div class="box red" data-color="red" data-number="1">1</div>
  <div class="box red" data-color="red" data-number="2">2</div>
  <div class="box red" data-color="red" data-number="3">3</div>
  <div class="box blue" data-color="blue" data-number="1">1</div>
  <div class="box blue" data-color="blue" data-number="2">2</div>
  <div class="box blue" data-color="blue" data-number="3">3</div>
  <div class="box green" data-color="green" data-number="1">1</div>
  <div class="box green" data-color="green" data-number="2">2</div>
  <div class="box green" data-color="green" data-number="3">3</div>
</div>