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

Ictscripters Chat

Het Grote Vibe Code Topic

PWYL source gezocht

Help testers nodig voor android app Urgent

Partner Gezocht om meerdere NFT Collecties op Open Sea te Plaatsen

Afspraken systeem met planbeperking

Developer Gezocht

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

370 Nieuwe Domeinnamen April 2026

Snel een website nodig?

Sicarras.com - Moderne Mafia Text-Based RPG

Categorie filter met jQuery

Participate now!

Google Cloud is in de problemen (en AWS weet het)

Nebius kondigt bouw aan van een van Europa's grootste datacenters

Samsung zal miljoenen verdienen aan Apple iPhone Fold dankzij zijn 12GB RAM

Functioneel ontwerp

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

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