Hur man filtrerar element

Lär dig hur du filtrerar DIV-element baserat på klassnamn.

Skapa filterbara DIV-element

Steg 1 - Lägg till HTML:

<!-- Kontrollknappar -->
<div id="myBtnContainer">
  <button class="btn active" onclick="filterSelection('alla')"> Visa alla</button>
  <button class="btn" onclick="filterSelection('bilar')"> Bilar</button>
  <button class="btn" onclick="filterSelection('djur')"> Djur</button>
  <button class="btn" onclick="filterSelection('frukter')"> Frukter</button>
  <button class="btn" onclick="filterSelection('färger')"> Färger</button>
</div>
<!-- Filterbara element.Observera att vissa har flera klassnamn (om de tillhör flera kategorier kan dessa användas). -->
<div class="container">
  <div class="filterDiv bilar">BMW</div>
  <div class="filterDiv färger frukter">Apelsin</div>
  <div class="filterDiv bilar">Volvo</div>
  <div class="filterDiv färger">Röd</div>
  <div class="filterDiv bilar">Ford</div>
  <div class="filterDiv färger">Blå</div>
  <div class="filterDiv animals">Katt</div>
  <div class="filterDiv animals">Hund</div>
  <div class="filterDiv fruits">Muskot</div>
  <div class="filterDiv fruits animals">Ananas</div>
  <div class="filterDiv fruits">Banan</div>
  <div class="filterDiv fruits">Limefrukt</div>
  <div class="filterDiv animals">Kreatur</div>
</div>

andra steg - lägg till CSS:

.container {
  överskridande: dolt;
}
.filterDiv {
  flytta: vänster;
  bakgrundsfärg: #2196F3;
  färg: #ffffff;
  bredd: 100px;
  radhögjd: 100px;
  text-align: center;
  marginal: 2px;
  visa: inte synlig; /* Standard: dölj */
}
/* Lägg till "show"-klass till filtrerade element */
.show {
  visa: block;
}
/* Ställ in stilen för knappen */
.btn {
  kanter: ingen;
  utlinning: ingen;
  marginal: 12px 16px;
  bakgrundsfärg: #f1f1f1;
  pekare: pekare;
}
/* Lägg till ljusgrå bakgrund när muspekaren är över */
.btn:hover {
  bakgrundsfärg: #ddd;
}
/* Lägg till mörk bakgrund till aktiv knappen */
.btn.active {
  bakgrundsfärg: #666;
  färg: vit;
}

tredje steg - lägg till JavaScript:

filterSelection("all")
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("filterDiv");
  if (c == "all") c = ";";
  // Lägg till klassen "show" (display:block) till filtrerade element och ta bort klassen "show" från omarkerade element
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}
// Visa filtrerade element
function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {
      element.className += " " + arr2[i];
    }
  }
}
// Dölj omarkerade element
function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);
    }
  }
  element.className = arr1.join(" ");
}
// Lägg till aktiv klass (gör det utmärkt) till nuvarande kontrollknappen
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

Prova själv