JQuery - Filtering

Dieser Filter basiert auf einer und/oder Filterung. Jenachdem welcher Filter ausgewählt wird wird der class selector in jQuery aufgebaut. Im Grunde funktiniert es so (.filter-red.filter-round,filter-green.filter-round) - entweder hat es die klasse red und round oder green und round


  • Farben
  • Blau
  • Rot
  • Grün
  • Farben
  • Rund
  • Quadrat
  • Rechteck

CSS
.js-filter{
    cursor: pointer;
}

.js-filter.checked:after{
    content: " ×";
}

.filter-item{
    width: 50px;
    height: 50px;
    display: inline-block;
}

.filter-blue{
    background-color: blue;
}

.filter-red{
    background-color: red;
}

.filter-green{
    background-color: green;
}

.filter-round{
    border-radius: 50%;
}

.filter-rectangle{
  width: 100px;
}

.filter-item.hidden{
    display: none;
}


HTML
<div class="tutorial-filter" style="display: flex;">
    <ul style="list-style: none; width: 200px">
        <li style="font-weight:bold">Farben</li>
        <li class="js-filter" data-type="color" data-value="blue">Blau</li>
        <li class="js-filter" data-type="color" data-value="red">Rot</li>
        <li class="js-filter" data-type="color" data-value="green">Grün</li>
    </ul>

    <ul style="list-style: none; width: 200px">
        <li style="font-weight:bold; list-style: none">Farben</li>
        <li class="js-filter" data-type="form" data-value="round">Rund</li>
        <li class="js-filter" data-type="form" data-value="square">Quadrat</li>
        <li class="js-filter" data-type="form" data-value="rectangle">Rechteck</li>
    </ul>
</div>

<div class="tutorial-filter-items" style="margin-top: 30px">
    <div class="filter-item filter-green filter-round"></div>
    <div class="filter-item filter-blue filter-round"></div>
    <div class="filter-item filter-red filter-rectangle"></div>
    <div class="filter-item filter-red filter-round"></div>
    <div class="filter-item filter-green filter-square"></div>
    <div class="filter-item filter-red filter-square"></div>
    <div class="filter-item filter-blue filter-rectangle"></div>
</div>


Jquery
$(document).on("click", ".js-filter", function(){
	var filters = [];

	$(this).toggleClass("checked");

	$(".js-filter.checked").each(function(){
		var filterValue = $(this).data("value"),
		filterGroup = $(this).data("type");

		if (!(filterGroup in filters)) {
			filters[filterGroup] = [];
		}

        filters[filterGroup].push(".filter-item.filter-" + filterValue);
	});

	// Build filter expression
	for (var i in filters) {
		filters[i] = filters[i].join(",");
	}

	$(".tutorial-filter-items .filter-item").addClass("hidden").filter(function () {
		var el = $(this),
		matches = true;
			for (var i in filters) {
				var filtersByGroup = filters[i];
				if (!el.is(filtersByGroup)) {
				matches = false;
				return false;
			}
		}
		return matches;
	}).removeClass("hidden");
});