Как сделать фильтр по нескольким параметрам?

Question

[ImSoSorry]

Есть такие списки (список первых городов, список вторых городов, список товаров):

<div class="filter-control">
	<ul>
		<li><a href="#">Chicago</a></li>
		<li><a href="#">Houston</a></li>
		<li><a href="#">Dallas</a></li>
	</ul>

	<ul>
		<li><a href="#">Chicago</a></li>
		<li><a href="#">Houston</a></li>
		<li><a href="#">Dallas</a></li>
	</ul>

	<ul>
		<li><a href="#">beer</a></li>
		<li><a href="#">whiskey</a></li>
	</ul>
</div>

И такие данные (первый город, второй город, товар):

<div class="filteredblock">

	<div class="Chicago Houston beer"></div>
	<div class="Chicago Houston whiskey"></div>
	<div class="Chicago Dallas beer"></div>
	<div class="Chicago Dallas whiskey"></div>
	<div class="Houston Chicago beer"></div>
	<div class="Houston Chicago whiskey"></div>
	<div class="Houston Dallas beer"></div>
	<div class="Houston Dallas whiskey"></div>
	<div class="Dallas Chicago beer"></div>
	<div class="Dallas Chicago whiskey"></div>
	<div class="Dallas Houston beer"></div>
	<div class="Dallas Houston whiskey"></div>

</div>

Необходимо сделать фильтр при помощи которого юзер сможет отфильтровывать данные. Например "Dallas - Houston - beer"

Как вообще подобное делается? Пардон за несуразное описание, новичек.

Answer 1

[0xD34F]

Чтобы различать фильтры, добавьте им атрибуты с именами.

Значения в фильтруемом списке - вместо классов разнесите их по отдельным атрибутам, имена которых будут соответствовать именам фильтров.

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

https://jsfiddle.net/58mp1rax/

Answer 2

[evorios]

У меня в проекте недавно была такая же задача. Я сделал её на основе CSS правил. Надеюсь, тебе такое решение тоже понравится.

https://jsfiddle.net/b0t3876r/23/

HTML

<div class="filter-control">
  <ul data-f1="a">
    <li><a data-f2="Chicago" href="#">Chicago</a></li>
    <li><a data-f2="Houston" href="#">Houston</a></li>
    <li><a data-f2="Dallas" href="#">Dallas</a></li>
  </ul>

  <ul data-f1="b">
    <li><a data-f2="Chicago" href="#">Chicago</a></li>
    <li><a data-f2="Houston" href="#">Houston</a></li>
    <li><a data-f2="Dallas" href="#">Dallas</a></li>
  </ul>

  <ul data-f1="c">
    <li><a data-f2="beer" href="#">beer</a></li>
    <li><a data-f2="whiskey" href="#">whiskey</a></li>
  </ul>
</div>

<div class="filteredblock a b c">

  <div class="a-Chicago b-Houston c-beer">Chicago Houston beer</div>
  <div class="a-Chicago b-Houston c-whiskey">Chicago Houston whiskey</div>
  <div class="a-Chicago b-Dallas c-beer">Chicago Dallas beer</div>
  <div class="a-Chicago b-Dallas c-whiskey">Chicago Dallas whiskey</div>
  <div class="a-Houston b-Chicago c-beer">Houston Chicago beer</div>
  <div class="a-Houston b-Chicago c-whiskey">Houston Chicago whiskey</div>
  <div class="a-Houston b-Dallas c-beer">Houston Dallas beer</div>
  <div class="a-Houston b-Dallas c-whiskey">Houston Dallas whiskey</div>
  <div class="a-Dallas b-Chicago c-beer">Dallas Chicago beer</div>
  <div class="a-Dallas b-Chicago c-whiskey">Dallas Chicago whiskey</div>
  <div class="a-Dallas b-Houston c-beer">Dallas Houston beer</div>
  <div class="a-Dallas b-Houston c-whiskey">Dallas Houston whiskey</div>

</div>

JavaScript

$(function () {
  var $list = $('.filteredblock');
	$('.filter-control a').on('click', (e) => {
    var $a = $(e.target);
    var $li = $a.parent();
    var $ul = $li.parent();
    var f1 = $ul.data('f1');
    var f2 = $a.data('f2');
    
    $li.toggleClass('checked');
    if ($li.hasClass('checked')) {
    	$list.addClass(`${f1}-${f2}`).removeClass(`${f1}`);
    } else {
    	$list.removeClass(`${f1}-${f2}`);
      if (!$ul.find('.checked').length)
      	$list.addClass(`${f1}`);
    }
    return false;
  });
});

CSS

@charset "utf-8";
body {
  background: #fff;
  padding: 20px;
  font-family: Segoe UI Symbol;
  color: #000;
}

.filter-control li {
  list-style-type: none;
}
.filter-control li:not(.checked):before {
  content: '☐';
}
.filter-control li.checked:before {
  content: '☑';
}

.filteredblock > div {
  color: #fff;
}

.filteredblock.a.b.c > div,
.filteredblock.a-Chicago > .a-Chicago,
.filteredblock.a-Houston > .a-Houston,
.filteredblock.a-Dallas > .a-Dallas,
.filteredblock.b-Chicago > .b-Chicago,
.filteredblock.b-Houston > .b-Houston,
.filteredblock.b-Dallas > .b-Dallas,
.filteredblock.c-beer > .c-beer,
.filteredblock.c-whiskey > .c-whiskey {
  color: #000;
}

.filteredblock:not(.a):not(.a-Chicago) > .a-Chicago,
.filteredblock:not(.a):not(.a-Houston) > .a-Houston,
.filteredblock:not(.a):not(.a-Dallas) > .a-Dallas,
.filteredblock:not(.b):not(.b-Chicago) > .b-Chicago,
.filteredblock:not(.b):not(.b-Houston) > .b-Houston,
.filteredblock:not(.b):not(.b-Dallas) > .b-Dallas,
.filteredblock:not(.c):not(.c-beer) > .c-beer,
.filteredblock:not(.c):not(.c-whiskey) > .c-whiskey {
  color: #fff;
}

Если пунктов в фильтрах уж очень много, то поможет в создании правил CSS следующая JS-функция:

var addCSS = function (selector, style) {
  var sheet = window.document.styleSheets[window.document.styleSheets.length - 1];
  sheet.addRule(selector, style);
};

С использованием функции addCSS это выглядит так:
https://jsfiddle.net/b0t3876r/24/