Как реализовать фильтр?

Question

[Tash1moto]

Всем привет.
Вчера делал фильтр на js для товаров, но понимаю что код получился громоздкий.
Есть 4 selectа ( color, size, category, author )
Есть 500+ div.product у каждого из них есть атрибуты ( color, size, category, author )

Задача:
если select color выбран, фильтровать все div.product по select'у color, если select color не выбран, то не применять фильтр color. И так для остальных select'ов

Вроде всё ясно, Но как сделать так что-бы фильтры комбинировались, не слетали.

У меня было так примерно.

input.on('change',function(e){
    $('.product').each( function(i,el){
        $( el ).attr('color') === e.target.value ? $( el ).show() : $( el ).hide(); // <-- проблема в hide, фильтры нельзя комбинировать, т.к. они слетают после применения след. фильтра
    });
});

Comments

[Tash1moto]

Знакомый сказал такие комбинации можно делать через XOR
но с побитовыми операциями я не работал.

Answer 1

[0xD34F]

Чтобы фильтры не слетали, надо при изменении значения одного обрабатывать значения всех. То есть, по событию change собираете значения всех фильтров, отбрасываете те, где ничего не выбрано, при фильтрации показываете или скрываете элемент в зависимости от того, соответствует ли он всем выбранным значениям или нет. Код может выглядеть как-то так, например (все атрибуты тут не простые, а data - сделайте у себя так же):

const $filters = $('.filter').change(function() {
  const filters = $filters
    .get()
    .filter(n => n.value)
    .map(n => [ n.dataset.name, n.value ]);

  $('.product')
    .hide()
    .filter((_, el) => filters.every(n => el.dataset[n[0]] === n[1]))
    .show();
});