Как отфильтровать элементы

Здесь вы узнаете, как отфильтровать DIV элементы, основываясь на их именах классов при помощи JavaScript.


Фильтрация DIV элементов

       
BMW
Апельсин
Volvo
Красный
Ford
Синий
Кошка
Собака
Арбуз
Киви
Банан
Лимон
Корова
Попробовать самому »

Как создать фильтрацию DIV элементов

Шаг 1) Добавляем HTML:

Пример


<!-- Кнопки -->
<div id="myBtnContainer">
  <button class="btn active" onclick="filterSelection('all')"> Показать все</button>
  <button class="btn" onclick="filterSelection('cars')"> Машины</button>
  <button class="btn" onclick="filterSelection('animals')"> Животные</button>
  <button class="btn" onclick="filterSelection('fruits')"> Фрукты</button>
  <button class="btn" onclick="filterSelection('colors')"> Цвета</button>
</div>

<!-- Фильтруемые элементы. Обратите внимание, что у некоторых есть несколько имен классов (это можно использовать, если они относятся к нескольким категориям) -->
<div class="container">
  <div class="filterDiv cars">BMW</div>
  <div class="filterDiv colors fruits">Апельсин</div>
  <div class="filterDiv cars">Volvo</div>
  <div class="filterDiv colors">Красный</div>
  <div class="filterDiv cars">Ford</div>
  <div class="filterDiv colors">Синий</div>
  <div class="filterDiv animals">Кошка</div>
  <div class="filterDiv animals">Собака</div>
  <div class="filterDiv fruits">Арбуз</div>
  <div class="filterDiv fruits animals">Киви</div>
  <div class="filterDiv fruits">Банан</div>
  <div class="filterDiv fruits">Лимон</div>
  <div class="filterDiv animals">Корова</div>
</div>

Шаг 2) Добавляем CSS:

Пример


.container {
  overflow: hidden;
}

.filterDiv {
  float: left;
  background-color: #2196F3;
  color: #ffffff;
  width: 100px;
  line-height: 100px;
  text-align: center;
  margin: 2px;
  display: none; /* По умолчанию скрыты */
}

/* Класс "show" добавляется только к отфильтрованным элементам */
.show {
  display: block;
}

/* Стили кнопок */
.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
}

/* Добавляем светло-серый фон при наведении курсора */
.btn:hover {
  background-color: #ddd;
}

/* Добавляем темный фон для активной кнопки */
.btn.active {
  background-color: #666;
  color: white;
}

Шаг 3) Добавляем JavaScript:

Пример


filterSelection("all")
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("filterDiv");
  if (c == "all") c = "";
  // Добавляем класс "show" к отфильтрованным элементам и убираем его у невыбранных элементов
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

// Показываем отфильтрованные элементы
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];
    }
  }
}

// Скрываем невыбранные элементы
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(" ");
}

// Добавляем класс активности текущей кнопке (подсвечиваем ее)
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";
  });
}

Попробовать самому »