Как создать фильтр опций с использованием JavaScript или jQuery?

Question

Бруно

javascript

Как создать фильтр опций с использованием JavaScript или jQuery?

Как реализовать фильтр на HTML и CSS, чтобы при выборе одного или нескольких чекбоксов показывался один определенный элемент из предложенных? Например, если выбран чекбокс 1, должен показываться соответствующий элемент; если выбраны чекбоксы 3 и 5, должен показываться соответствующий элемент и так далее. Какие подходы можно использовать для достижения этой функциональности и какая лучшая практика в данном случае?

9 марта 2024 г. 16:09

Ответы на вопрос 2

Похожие вопросы

Answer 1

Для создания фильтра опций с использованием JavaScript или jQuery можно использовать следующий подход:

1. Создать список опций с помощью HTML и CSS.
2. Добавить каждой опции data-атрибуты для идентификации и фильтрации.
3. Написать функцию фильтрации на JavaScript или jQuery, которая будет скрывать/показывать определенные элементы в зависимости от выбранных опций.

Пример реализации фильтра на HTML и CSS:

```html
<input type="checkbox" id="option1" data-filter="filter1">
<label for="option1">Option 1</label>
<input type="checkbox" id="option2" data-filter="filter2">
<label for="option2">Option 2</label>
<input type="checkbox" id="option3" data-filter="filter3">
<label for="option3">Option 3</label>

<div class="element filter1">Element 1</div>
<div class="element filter2">Element 2</div>
<div class="element filter3">Element 3</div>
```

```css
.element {
   display: none;
}

.element.show {
   display: block;
}
```

Пример JavaScript/ jQuery кода для фильтрации:

```javascript
$('input[type="checkbox"]').change(function() {
   var selectedOptions = [];
   $('input[type="checkbox"]:checked').each(function() {
      selectedOptions.push($(this).data('filter'));
   });
   
   $('.element').removeClass('show'); // скрываем все элементы
   $('.element').each(function() {
      var elementFilter = $(this).data('filter');
      if (selectedOptions.includes(elementFilter)) {
         $(this).addClass('show'); // показываем элемент, если его filter соответствует выбранным опциям
      }
   });
});
```

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

Answer 2

document.querySelector('.options').addEventListener('change', e => {
  const selector = Array
    .from(
      e.currentTarget.querySelectorAll('input'),
      n => n.checked ? `.${n.value}` : `:not(.${n.value})`)
    .join('');

  for (const n of document.querySelector('.box').children) {
    n.classList.toggle('hidden', !n.matches(selector));
  }
});
 
 или 
 
 const checkboxes = [...document.querySelectorAll('.options input')];
const items = [...document.querySelector('.box').children];

checkboxes.forEach(n => n.addEventListener('change', onChange));

function onChange() {
  const checked = checkboxes.reduce((acc, n) => (acc[n.value] = n.checked, acc), {});

  items.forEach(function({ classList: cl }) {
    cl.toggle('hidden', this.some(n => n[1] !== cl.contains(n[0])));
  }, Object.entries(checked));
}