@fgehte

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

Всем привет) Нужна помощь) Есть чекбоксы, при нажатии на которые происходит фильтрация в зависимости от их значения, если выбрано несколько чекбоксов то и фильтроваться должно по обоим условиям
<form class="map__filters">
  <fieldset id="housing-features" class="map__features">
    <input type="checkbox" name="features" value="wifi" id="filter-wifi" class="map__checkbox">
    <label for="filter-wifi">Wi-Fi</label>

    <input type="checkbox" name="features" value="dishwasher" id="filter-dishwasher" class="map__checkbox">
    <label for="filter-dishwasher">Посудомоечная машина</label>

    <input type="checkbox" name="features" value="parking" id="filter-parking" class="map__checkbox">
    <label for="filter-parking">Парковка</label>

    <input type="checkbox" name="features" value="washer" id="filter-washer" class="map__checkbox">
    <label for="filter-washer">Стиральная машина</label>

    <input type="checkbox" name="features" value="elevator" id="filter-elevator" class="map__checkbox">
    <label for="filter-elevator">Лифт</label>
    <input type="checkbox" name="features" value="conditioner" id="filter-conditioner" class="map__checkbox">
    <label for="filter-conditioner">Кондиционер</label>
   </fieldset>
</form>

const data = [
  {
    "features": [
      "wifi",
      "parking",
      "washer",
      "elevator"
    ]
  },
  {
    "features": [
      "wifi",
      "dishwasher",
      "parking"
    ]
  },
  {
    "features": [
      "dishwasher",
      "parking",
      "washer",
      "elevator",
      "conditioner"
    ]
  }
];

const form = document.querySelector('.map__filters');

form.addEventListener('change', () => {
  const housingFeatures = document.querySelectorAll('#housing-features input:checked');
  console.log(housingFeatures)
});
  • Вопрос задан
  • 56 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
<div id="items"></div>

document.querySelector('.map__filters').addEventListener('change', function() {
  const values = [...document.querySelectorAll('.map__checkbox:checked')].map(n => n.value);

  document.querySelector('#items').innerHTML = data
    .filter(n => n.features.some(m => values.includes(m)))
    .map(n => `<div>${JSON.stringify(n, null, 2)}</div>`)
    .join('');
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@AleksRap
Фильтруйте не dom элементы, а массив с данными, который прилетает от сервера, после фильтра отрендерите на странице
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы