Для реализации фильтрации по категориям в реализации JavaScript у нас есть несколько подходов. Ниже я предлагаю два варианта решения данной задачи.
1. Использование DOM-манипуляций:
- В HTML создаем список категорий с помощью тега <select>. Каждая категория будет иметь свое значение (value).
- Создаем список элементов, которые мы хотим фильтровать. Каждому элементу добавляем класс, соответствующий одной из категорий.
- Создаем функцию, которая будет вызываться при изменении значения в списке категорий.
- В функции получаем выбранное значение категории, перебираем все элементы и сравниваем их классы с выбранной категорией.
- Если класс элемента соответствует выбранной категории, то оставляем элемент видимым. В противном случае скрываем элемент с помощью свойства 'display: none'.
Пример кода:
<select id="category-filter">
<option value="all">Все</option>
<option value="category1">Категория 1</option>
<option value="category2">Категория 2</option>
<option value="category3">Категория 3</option>
</select>
<div class="item category1">Элемент 1</div>
<div class="item category2">Элемент 2</div>
<div class="item category1">Элемент 3</div>
<div class="item category3">Элемент 4</div>
<script>
var filterSelect = document.getElementById('category-filter');
var items = document.getElementsByClassName('item');
filterSelect.addEventListener('change', function() {
var selectedCategory = filterSelect.value;
for (var i = 0; i < items.length; i++) {
if (selectedCategory === 'all' || items[i].classList.contains(selectedCategory)) {
items[i].style.display = 'block';
} else {
items[i].style.display = 'none';
}
}
});
</script>
2. Использование фреймворка или библиотеки:
Если у вас используется фреймворк или библиотека, такая как React, Vue или Angular, вы можете воспользоваться их функциональностью для реализации фильтрации по категориям. Наиболее распространенным подходом является использование виртуального DOM и реактивных свойств.
Пример кода с использованием React:
import React, { useState } from 'react';
function App() {
const [selectedCategory, setSelectedCategory] = useState('all');
const handleCategoryChange = (event) => {
setSelectedCategory(event.target.value);
};
return (
<div>
<select value={selectedCategory} onChange={handleCategoryChange}>
<option value="all">Все</option>
<option value="category1">Категория 1</option>
<option value="category2">Категория 2</option>
<option value="category3">Категория 3</option>
</select>
<div className="item category1">Элемент 1</div>
<div className="item category2">Элемент 2</div>
<div className="item category1">Элемент 3</div>
<div className="item category3">Элемент 4</div>
</div>
);
}
В этом примере мы используем хук useState, чтобы создать состояние выбранной категории. При изменении значения списка категорий вызывается функция handleCategoryChange, которая обновляет выбранную категорию в состоянии. Затем мы можем использовать это состояние для фильтрации элементов внутри JSX-разметки.
Оба варианта решения могут быть адаптированы под ваши конкретные потребности и используемую архитектуру вашего приложения.