Как фильтровать элементы по двум и более параметрам?

Question

[r_g_b_a]

Подскажите алгоритм, как делается такая фильтрация. Без анимации, позиционирования и прочего, просто отображение/скрытие элементов несколькими фильтрами одновременно.
Попробую объяснить, как я пытался сделать и почему не получилось:
всем элементам добавил data-* атрибуты color, size, shape с соответствующими значениями. При переключении фильтра проходил циклом по всем элементам, и сравнивал значение data-атрибута элемента и кнопки. Если они не совпадают, то применяется display: none, в противном случае display: block.
Но этот подход не правильно работает, потому что при выборе значения фильтра "any" показываются абсолютно все элементы, даже если они до этого быть скрыты другими фильтрами.
Еще придумал вариант, когда каждый фильтр ставит/убирает свой уникальный класс для скрытия элемента, вместо установки инлайнового display. Это работает, но количество классов растет пропорционально количеству фильтров.

Answer 1

[Алексей]

Создайте класс с полями - значениями фильтров и рендерите результат с учетом всех этих фильтров. Так же в этом классе добавьте методы срабатывающие при переключении фильтров и меняющие значения фильтров в соответствующих полях класса

class FigureFilter {
  size = null;
  color = null;
  shape = null;
  
  constructor(selector) {
    this.allFiguresNode = document.querySelectorAll(selector);
  }

  /**
   * Эти свойства юзать при нажатии на кнопки
   */
  changeSize(size) {
    this.size = size;
    this.#render();
  }

  changeColor(color) {
    this.color = color;
    this.#render();
  }

  changeShape(shape) {
    this.shape = shape;
    this.#render();
  }

  /**
   * Эти не трогать
   */
  #render() {
    [...this.allFiguresNode].forEach(figure => {

      this.#checkFigure(figure, 'size');
      this.#checkFigure(figure, 'color');
      this.#checkFigure(figure, 'shape');
    })
  }
  
  #checkFigure(figure, area) {
    figure.dataset[area] === this[area]
      ? this.#showFigure(figure)
      : this.#hideFigure(figure);
  }
  
  #showFigure(el) {
    el.setAttribute('hidden', true);
  }
  
  #hideFigure(el) {
    el.removeAttribute('hidden');
  }
}

Набросал на скорую руку пример такого класса