Filtern

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


Der HTML Code

<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>


Der CSS Code

.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;
}


jQuery Code

$(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");
});