使用普通javascript过滤带有两个选择元素的元素

Question

我正在努力使用两个选择元素来对我的方块和圆圈进行排序。

每个select元素单独工作，但它不能一起工作。 任何人都可以告诉我如何让它正常工作？

请帮忙！

function colorType(){
  var colorBox = document.querySelector('#selectColor');
  var boxValue = colorBox.options[colorBox.selectedIndex].value;
  
  var blue = document.querySelectorAll('.card.blue');
  var red = document.querySelectorAll('.card.red');


  if(boxValue == 'blue'){
    for (var i = 0; i < red.length; i++){
      red[i].classList.add('hidden');
    }
    for (var i = 0; i < blue.length; i++){
      blue[i].classList.remove('hidden');
    }
  }
  
  if(boxValue == 'red'){
    for (var i = 0; i < blue.length; i++){
      blue[i].classList.add('hidden');
    }
    for (var i = 0; i < red.length; i++){
      red[i].classList.remove('hidden');
    }
  }  
}

function shapeType(){
  var shapeBox = document.querySelector('#selectShape');
  var boxValue = shapeBox.options[shapeBox.selectedIndex].value;
  
  var round = document.querySelectorAll('.card.round');
  var square = document.querySelectorAll('.card.square');

  if(boxValue == 'round'){
    for (var i = 0; i < square.length; i++){
      square[i].classList.add('hidden');
    }
    for (var i = 0; i < round.length; i++){
      round[i].classList.remove('hidden');
    }
  }
  
  if(boxValue == 'square'){
    for (var i = 0; i < round.length; i++){
      round[i].classList.add('hidden');
    }
    for (var i = 0; i < square.length; i++){
      square[i].classList.remove('hidden');
    }
  }
}

.card{
  width:100px;
  height: 100px;
  float: left;
  margin: 20px;
}

.blue{
  background: blue;
}

.red{
  background: red;
}

.round{
  border-radius: 50%;
}

.hidden{
 display: none; 
}

<label>Choose the color 
  <select id="selectColor" onchange="colorType();">
    <option value=""></option>
    <option value="blue">Blue</option>
    <option value="red">Red</option>
  </select>
</label>
<label>Choose the shape
  <select id="selectShape" onchange="shapeType();">
    <option value=""></option>
    <option value="round">Round</option>
    <option value="square">Square</option>
  </select>
</label>


<div class="card-holder">
  <div class="card blue round"></div>
  <div class="card blue square"></div>
  <div class="card blue round"></div>
  <div class="card red round"></div>
  <div class="card red square"></div>
  <div class="card blue square"></div>
  <div class="card red round"></div>
  <div class="card red square"></div>
</div>

Answer 1

您可以执行以下操作，选择卡片，将HTMLCollection转到阵列并使用filter。 display函数没用，但我放弃了，所以我不必更改HTML。

编辑：详细解释

1. 您需要获得所有卡片。
   

为此，最好使用getElementdByClassName，因为它会返回HTMLCollection  另一方面，querySelectorAll会返回NodeList。HTMLCollection是实时收藏，而NodeList的情况并非总是如此。

  

HTML DOM中的HTMLCollection是实时的;它会自动更新   当基础文档发生变化时。

因此，一旦您在变量中获得了卡片，如果您添加或删除卡片，则无需更新变量值，它将自动完成。

1. 选择输入时触发您的功能

你已经做过，那只是onchange事件。


1. 获取形状和颜色值

只需使用select检索document.getElementById项{更快querySelector), then the值attribute give you the value of the selected选项inside your选择标记。

1. 显示所有卡片并隐藏正确的卡片

由于cards是HTMLCollection，因此您无法在其上使用Array方法，因此您需要将其转换为Array.from的数组。 然后，您可以使用forEach并删除“隐藏”类。

要添加，删除或检查类的存在，我们使用ClassList属性。 要过滤Array.from(cards)，请使用filter方法，然后将“隐藏”类添加到所需的卡片中。







var cards = document.getElementsByClassName('card');

var colorSelect = document.getElementById('selectColor');
var shapeSelect = document.getElementById('selectShape');

function colorType() {
  display(colorSelect.value, shapeSelect.value);
}

function shapeType() {
  display(colorSelect.value, shapeSelect.value);
}

function display(color, shape) {
  Array.from(cards).forEach(card => card.classList.remove('hidden'));

  if (color) {
    Array.from(cards)
      .filter(card => !card.classList.contains(color))
      .forEach(card => card.classList.add('hidden'))
  }
  
  if (shape) {
      Array.from(cards)
      .filter(card => !card.classList.contains(shape))
      .forEach(card => card.classList.add('hidden'))
  }
}

.card{
  width:100px;
  height: 100px;
  float: left;
  margin: 20px;
}

.blue{
  background: blue;
}

.red{
  background: red;
}

.round{
  border-radius: 50%;
}

.hidden{
 display: none; 
}

<label>Choose the color 
  <select id="selectColor" onchange="colorType();">
    <option value=""></option>
    <option value="blue">Blue</option>
    <option value="red">Red</option>
  </select>
</label>
<label>Choose the shape
  <select id="selectShape" onchange="shapeType();">
    <option value=""></option>
    <option value="round">Round</option>
    <option value="square">Square</option>
  </select>
</label>


<div class="card-holder">
  <div class="card blue round"></div>
  <div class="card blue square"></div>
  <div class="card blue round"></div>
  <div class="card red round"></div>
  <div class="card red square"></div>
  <div class="card blue square"></div>
  <div class="card red round"></div>
  <div class="card red square"></div>
</div>

希望它有所帮助，
最好的问候