javascript - Vanilla javascript中的下拉过滤器

Question

我正在为我在大学的一个科目开发一个元素，包括用纯 javascript 做一个下拉列表过滤器，以过滤 html/css 中的图像网格。导致我出现问题的是这个过滤器需要同时处理 3 个下拉列表。例如，如果我选择自然和人，他们需要给我这两个图像网格，当我选择类别时，所有图像都需要出现。如果你们能帮助我，我将不胜感激。

var elemento = document.getElementById("category1");


elemento.addEventListener("change", function() {
  var opcao = elemento.options[elemento.selectedIndex].text;

  var fotos = document.getElementsByClassName("photo");

  for (var i = 0; i < fotos.length; ++i) {
    if (!fotos[i].classList.contains(opcao)) {
      fotos[i].style.display = "none";
    } else {
      fotos[i].style.display = 'block';
    }
  }
});

<div class="filter">
  <select id="category1">
    <option value="">category</option>
    <option value="people">people</option>
    <option value="nature">nature</option>
    <option value="landscapes">landscapes</option>
  </select>
  <select id="category2">
    <option value="">category</option>
    <option value="people">people</option>
    <option value="nature">nature</option>
    <option value="landscapes">landscapes</option>
  </select>
  <select id="category3">
    <option value="">category</option>
    <option value="people">people</option>
    <option value="nature">nature</option>
    <option value="landscapes">landscapes</option>
  </select>
</div>

<div class="gallery">
  <div class="photo nature people" style="background-image: url(https://picsum.photos/1000/1000?random=1);"></div>

  <div class="photo landscapes" style="background-image: url(https://picsum.photos/1000/1000?random=2);"></div>

  <div class="photo nature" style="background-image: url(https://picsum.photos/1000/1000?random=3);"></div>

  <div class="photo people landscapes" style="background-image: url(https://picsum.photos/1000/1000?random=4);"></div>

  <div class="photo people" style="background-image: url(https://picsum.photos/1000/1000?random=5);"></div>


  <div class="photo nature landscapes" style="background-image: url(https://picsum.photos/1000/1000?random=6);"></div>

  <div class="photo people" style="background-image: url(https://picsum.photos/1000/1000?random=7);"></div>

  <div class="photo natureza landscapes people" style="background-image: url(https://picsum.photos/1000/1000?random=8);"></div>

  <div class="photo natureza landscapes people" style="background-image: url(https://picsum.photos/1000/1000?random=9);"></div>

  <div class="photo nature people" style="background-image: url(https://picsum.photos/1000/1000?random=10);"></div>

  <div class="photo landscapes" style="background-image: url(https://picsum.photos/1000/1000?random=11);"></div>

  <div class="photo landscapes nature" style="background-image: url(https://picsum.photos/1000/1000?random=12);"></div>
</div>

Answer 1

这将是我的第一次尝试。如果您需要任何解释，请随时在评论中提问。

let selectedFilters = [];
const images = [...document.querySelectorAll('.photo')];
const filters = [...document.querySelectorAll('.filter select')];

for (const filter of filters) {
  filter.addEventListener('change', function(event) {
    selectedFilters = filters.map(filter => filter.value).filter(Boolean);
    console.log(selectedFilters);
    for (const image of images) {
      image.classList[selectedFilters.some(filter => image.classList.contains(filter)) 
        ? 'add'
        : 'remove']('visible');
    }
  })
}

.photo {
  color: #fff;
  height: 120px;
  width: 120px;
  background-size: cover;
  text-shadow: 0 0 2px #000;
  opacity: 0;
  overflow: hidden;
  transition: all .4s ease-in-out;
}

.gallery {
  display: flex;
}

.visible {
  height: 240px;
  width: 240px;
  opacity: 1;
}

<div class="filter">
  <select id="category1">
    <option value="">category</option>
    <option value="people">people</option>
    <option value="nature">nature</option>
    <option value="landscapes">landscapes</option>
  </select>
  <select id="category2">
    <option value="">category</option>
    <option value="people">people</option>
    <option value="nature">nature</option>
    <option value="landscapes">landscapes</option>
  </select>
  <select id="category3">
    <option value="">category</option>
    <option value="people">people</option>
    <option value="nature">nature</option>
    <option value="landscapes">landscapes</option>
  </select>
</div>

<div class="gallery">
  <div class="photo nature people" style="background-image: url(https://picsum.photos/1000/1000?random=1);">photo nature people</div>
  <div class="photo landscapes" style="background-image: url(https://picsum.photos/1000/1000?random=2);">photo landscapes</div>
  <div class="photo nature" style="background-image: url(https://picsum.photos/1000/1000?random=3);">photo nature</div>
  <div class="photo people landscapes" style="background-image: url(https://picsum.photos/1000/1000?random=4);">photo people landscapes</div>
  <div class="photo people" style="background-image: url(https://picsum.photos/1000/1000?random=5);">photo people</div>
  <div class="photo nature landscapes" style="background-image: url(https://picsum.photos/1000/1000?random=6);">photo nature landscapes</div>
  <div class="photo people" style="background-image: url(https://picsum.photos/1000/1000?random=7);">photo people</div>
  <div class="photo nature landscapes people" style="background-image: url(https://picsum.photos/1000/1000?random=8);">photo nature landscapes people</div>
  <div class="photo nature landscapes people" style="background-image: url(https://picsum.photos/1000/1000?random=9);">photo nature landscapes people</div>
  <div class="photo nature people" style="background-image: url(https://picsum.photos/1000/1000?random=10);">photo nature people</div>
  <div class="photo landscapes" style="background-image: url(https://picsum.photos/1000/1000?random=11);">photo landscapes</div>
  <div class="photo landscapes nature" style="background-image: url(https://picsum.photos/1000/1000?random=12);">photo landscapes nature</div>
</div>