Categorie filter met jQuery

djordyh

Hallo,

Ik heb helaas erg weinig verstand van jQuery dus ik vraag me af hoe je het volgende maakt (of als iemand een kant en klare heeft zou helemaal mooi zijn):

Ik heb een overzicht van downloads, op rijen van 4. Ze hebben allemaal hun eigen categorie.
Hoe kan ik ervoor zorgen dat als ik in een dropdown bijvoorbeeld categorie 1 kiest, hij dan de div met alle rijen filtert zodat alleen de downloads met categorie 1 blijven staan? En dan zonder dat hij de pagina ververst, dat hij ze gewoon gelijk laad?

Ik had dit gevonden en geprobeerd, maar dat werkt helaas niet met een dropdown.

Kan iemand mij helpen?

MVG,
Djordy.

Dees

Misschien heb je hier wat aan?

DirkZz

JSFiddle ligt er uit hier, dus dan maar zo.
Even quick en dirty om je op weg te helpen.

HTML

<style>
    /* Snel wat markup, niet interessant. */
    div > div { width: 100px;height: 100px;text-align: center;float: left;background-color: #c0c0c0; margin: 10px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
    function applyFilter(){
        /* Variabelen */
        var $categorieRijen, $teTonenCategorie;


        /* Alle rijen ophalen */
        $categorieRijen = $('.container > div');


        /* Welke categorie willen we tonen? Deze in de variabele $teTonenCategorie zetten */
        $teTonenCategorie = $('select[name="filter"]').val();


        /* Eerst alles op zichtbaar zetten */
        $categorieRijen.show();


        /* Wanneer de reset wordt aangereoepen, niets verbergen en alles zichtbaar laten.*/
        if($teTonenCategorie !== "reset") {
            /* Anders alle categorieen verbergen die niet de class hebben die voldoet aan het filter dat geselecteerd is in de dropdown */
            $categorieRijen.not('.' + $teTonenCategorie ).hide();
        }
    }
</script>


<select name="filter" onchange="applyFilter()">
    <option value="reset">reset</option>
    <option value="een">Een</option>
    <option value="twee">Twee</option>
    <option value="drie">Drie</option>
</select>


<div class="container">
    <div class="een"> Een </div>
    <div class="een"> Een </div>
    <div class="twee"> Twee </div>
    <div class="twee"> Twee </div>
    <div class="drie"> drie </div>
    <div class="een"> Een </div>
    <div class="drie"> drie </div>
    <div class="twee een"> een en twee </div>
</div>

Toon Meer

Je geeft dus elk element een class mee met de categorienaam en zet deze ook in de filter selector.

stijnhau

is inderdaad een goede oplssing dirkz maar noig iets beter vind ik het als je geen selectbox gebruikt maar option boxes zodat je kan zegge ik wil cat 1 & 3 zien bevoorbeeld.

DirkZz

Citaat van stijnhau

is inderdaad een goede oplssing dirkz maar noig iets beter vind ik het als je geen selectbox gebruikt maar option boxes zodat je kan zegge ik wil cat 1 & 3 zien bevoorbeeld.

Is wel veel netter ja,

Maar dan moet je wel goed opletten wanneer een item onder meerdere categorieën valt.

EDIT:

Dan krijg je dus dit:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style>
    	div > div { width: 100px;height: 100px;text-align: center;float: left;background-color: #c0c0c0; margin: 10px;}
	</style>
</head>
<body>
<div class="filterOpties">
	<label for="een">Een</label>
	<input id="een" class="filterOptie" type="checkbox" checked name="filterOptie" onchange="applyFilter(this)" value="een" />
	<label for="Twee">Twee</label>
	<input id="twee" class="filterOptie" type="checkbox" checked name="filterOptie" onchange="applyFilter(this)" value="twee" />
	<label for="Drie">Drie</label>
	<input id="drie" class="filterOptie" type="checkbox" checked name="filterOptie" onchange="applyFilter(this)" value="drie" />
</div>


<div class="container">
	<div class="opmaak class een"> Een </div>
	<div class="een"> Een </div>
	<div class="twee"> Twee </div>
	<div class="twee"> Twee </div>
	<div class="drie"> drie </div>
	<div class="een"> Een </div>
	<div class="drie"> drie </div>
	<div class="twee een">een en twee</div>
</div>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
	var $filterOpties;


	$filterOpties = $('.filterOpties > input[type="checkbox"][name="filterOptie"]').map(function(){
    	return this.value;
	});


	var $hiddenCategories = [];


	function applyFilter(element){


    	var $allElements, $isChecked;


    	$allElements = $('.container > div ');
    	$isChecked   =  $.inArray(element.value, $hiddenCategories);


    	if( $isChecked === -1  && element.checked === false) {
        	$hiddenCategories.push( element.value );
    	} else if  ( $isChecked !== -1 && element.checked === true ) {
        	$hiddenCategories.splice($isChecked, 1);
    	}


    	$.each($allElements, function (i, el){
        	var $shouldHide;


        	$shouldHide = $(el).map(function(){


            	var filterMatches, aantalFilterOpties, context;


            	context = this;
            	filterMatches = aantalFilterOpties = 0;


            	$.each($filterOpties, function(x, filterOptie){
                	if( context.className.contains(filterOptie) ){
                    	aantalFilterOpties ++;
                	}
                	if ( context.className.contains(filterOptie) && $.inArray(filterOptie, $hiddenCategories ) !== -1 ) {
                    	filterMatches++;
                	}
            	});


            	return { hide: (aantalFilterOpties !== filterMatches),  element: i};
        	});


        	$.each($shouldHide, function(toHide, divElement){
            	$($allElements[divElement.element]).toggle(divElement.hide);
        	});


    	});
	}
</script>
</body>
</html>

Toon Meer

djordyh

Bedankt DirkZz!

Heb het ingebouwd en het werkt
Wist ook niet dat het relatief simpel was, al die plugins hadden echt codes van honderde lijnen

ICTscripters

Dé plek voor IT

Dé plek voor IT

Beta-testers gezocht voor Crypto-oefenplatform

Na 15 jaar terug van weggeweest: iCriminals.nl is terug (BETA)!

Developer Gezocht

Op zoek naar de legends

[FREE] WeFact Hosting module

Help testers nodig voor android app Urgent

Versio vervanger

Afspraken systeem met planbeperking

350 Nieuwe Domeinnamen Januari 2026

321 Nieuwe Domeinnamen December 2025

Meerdere mafia game template te koop

Categorie filter met jQuery

Participate now!

Fijne feestdagen

Kritieke update voor Really Simple Security-plug-in

ING Nederland streeft naar ondersteuning van Google Pay tegen eind februari

Functioneel ontwerp

Access Control List implementatie in PHP/MySQL - deel 1/2

Access Control List implementatie in PHP/MySQL - deel 2/2

Gebruikers die dit topic bekijken