Как реализовать множественную фильтрацию карточек товаров по нажатию на несколько переключателей?

Для реализации множественной фильтрации карточек товаров по нажатию на несколько переключателей вам необходимо выполнить следующие шаги:

1. Создайте HTML-разметку для переключателей. Для каждой категории фильтрации создайте отдельный переключатель, например, используя элементы <input type="checkbox"> или <input type="radio">. Для каждого переключателя задайте уникальный идентификатор и привяжите соответствующие классы или атрибуты карточкам товаров, которые должны отображаться при выборе данной категории фильтрации.

Пример HTML-разметки:

<input type="checkbox" id="filter1">
<label for="filter1">Фильтр 1</label>

<input type="checkbox" id="filter2">
<label for="filter2">Фильтр 2</label>

<div class="card" data-filter="filter1">Карточка товара 1</div>
<div class="card" data-filter="filter2">Карточка товара 2</div>
<div class="card" data-filter="filter1 filter2">Карточка товара 3</div>

2. Напишите JavaScript-код, который будет обрабатывать события изменения состояния переключателей. При каждом изменении состояния переключателей вы должны скрыть все карточки товаров и затем отобразить только те карточки, которые соответствуют выбранным фильтрам.

Пример JavaScript-кода:

// Получаем все переключатели и карточки товаров
const filters = document.querySelectorAll('input[type="checkbox"]');
const cards = document.querySelectorAll('.card');

// Обрабатываем изменение состояния переключателей
filters.forEach(filter => {
  filter.addEventListener('change', filterCards);
});

// Функция для фильтрации карточек товаров
function filterCards() {
  // Получаем выбранные фильтры
  const activeFilters = Array.from(filters).filter(filter => filter.checked).map(filter => filter.id);

  // Скрываем все карточки товаров
  cards.forEach(card => {
    card.style.display = 'none';
  });

  // Отображаем только карточки, соответствующие выбранным фильтрам
  cards.forEach(card => {
    const cardFilters = card.dataset.filter.split(' ');
    if (activeFilters.every(filter => cardFilters.includes(filter))) {
      card.style.display = 'block';
    }
  });
}

В результате выполнения указанных шагов вы получите множественную фильтрацию карточек товаров по нажатию на несколько переключателей. При выборе нескольких фильтров будут отображаться только карточки товаров, которые соответствуют всем выбранным фильтрам.