Categorie filter met jQuery

djordyh · 9 April 2014

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 · 9 April 2014

Misschien heb je hier wat aan?

DirkZz · 9 April 2014

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 · 9 April 2014

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 · 10 April 2014

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 · 10 April 2014

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

Kunnen jullie mij helpen met deze enquete

PHP Point of Sale

een eigen cloud sever

Probleem C++ en CL

Unraid

Smarty Update

DNS update Directadmin

Graag advies voor mijn website

Evesi Marktplaats Script

Email invite script

213 Nieuwe domeinnamen September 2024

Categorie filter met jQuery

Participate now!

ING Nederland streeft naar ondersteuning van Google Pay tegen eind februari

Het Belang van Standaardisatie

De Revolutionaire Rol van IT in Alzheimeronderzoek

Functioneel ontwerp

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

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

Delen