Как сделать - Фильтр элементов
Узнать, как фильтровать элемент DIV на основе его имени класса.
Фильтр элементов DIV
БМВ
Апельсин
Вольво
Красный
Мустанг
Синий
Кошка
Собака
Арбуз
Киви
Банан
Лемон
Корова
Создание фильтра элементов DIV
Шаг 1) Добавить HTML:
Пример
<!-- Control buttons -->
<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">БМВ</div>
<div class="filterDiv colors fruits">Апельсин</div>
<div class="filterDiv cars">Вольво</div>
<div class="filterDiv colors">Красный</div>
<div class="filterDiv cars animals">Мустанг</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" (display:block) к отфильтрованным элементам и удалите класс "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";
});
}
Редактор кода »
