Filtrer des divs avec des class multiples

**Dae_mon** · 14/04/2013, 18h23

Bonjour à tous,

Ayant résolu mon problème sur le moyen de cacher / montrer des divs, je passe à la deuxième phase de filtering suivant des class multiples.

J'ai trouvé sur le net un exemple de filtre qui utilise un menu.

Lorsque que l'on click dessus, cela fait apparaitre / disparaitre les éléments suivants la class de la div. Le code fonctionne très bien.

J'aimerai néanmoins améliorer le code afin de pouvoir réaliser un filtre avec des sélection multiple.

Dans l'exemple ci-dessous, les éléments du menu sont actives un à la fois.

J'aimerai pouvoir lorsque je click sur plusieurs éléments les rendre actif ou inactif selon le besoin.

Et donc filtrer des class multiple dans les divs.

Au final, avoir un filtre avec mot clés.

Ex: Si dans le menu, j'ai par exemple:

Tout | Mot clés 1 | Mot clés 2 | Mot clés 3.

Lorsque je click sur par exemple mot clés 1 et 2, il se mettent en surbrillance et affiche les divs ayant uniquement ces deux class.

Si je veux changer mon filtre, je "décoche" par exemple mot clés 1 et je click sur mot clés 3.

Mais pour l'instant le n'arrive par à réaliser ce que je veux faire.

Voici le code trouvé sur le net:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
 
<style type="text/css">
/* SIMLPE CSS RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
/* remember to define focus styles! */
:focus { outline: 0; }
/* remember to highlight inserts somehow! */
ins { text-decoration: none; }
del { text-decoration: line-through; }
/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: collapse; border-spacing: 0; }
/*- -*/
/*- GENERIC BODY STYLES -*/
body {
        font: 12px/18px Arial, Helvetica, sans-serif;
        color: #333;
        background: #fff;
}
p { margin-bottom: 18px; }
a { text-decoration: underline; }
a:hover { text-decoration: none; }
#container { width: 802px; margin: 0 auto; }
/*- -*/
/*- FILTER OPTIONS -*/
ul#filterOptions {
        width: 802px;
        height: 52px;
        margin: 30px 0;
        overflow: hidden;
}
ul#filterOptions li { height: 52px; margin-right: 2px; float: left; }
ul#filterOptions li a {
        height: 50px;
        padding: 0 20px;
        border: 1px solid #999;
        background: #cfcfcf;
        color: #fff;
        font-weight: bold;
        line-height: 50px;
        text-decoration: none;
        display: block;
}
ul#filterOptions li a:hover { background: #c9c9c9; }
ul#filterOptions li.active a { background: #999; }
/*- -*/
/*- OUR DATA HOLDER -*/
#ourHolder { width: 800px; height: 850px; overflow: hidden; }
#ourHolder div.item {
        width: 200px;
        height: 200px;
        float: left;
        text-align: center;
}
#ourHolder div.item h3 { margin-top: 10px; font-size: 16px; line-height: 20px; }
/*- -*/
</style>
 
<script type="text/javascript">
$(document).ready(function() {
        $('#filterOptions li a').click(function() {
                // fetch the class of the clicked item
                var ourClass = $(this).attr('class');
                
                // reset the active class on all the buttons
                $('#filterOptions li').removeClass('active');
                // update the active state on our clicked button
                $(this).parent().addClass('active');
                
                if(ourClass == 'all') {
                        // show all our items
                        $('#ourHolder').children('div.item').show();    
                }
                else {
                        // hide all elements that don't share ourClass
                        $('#ourHolder').children('div:not(.' + ourClass + ')').hide();
                        // show all elements that do share ourClass
                        $('#ourHolder').children('div.' + ourClass).show();
                }
                return false;
        });
});
</script>
 
<title>Simple data filtering using jQuery</title>
</head>
 
<body>
 
<div id="container">
  <ul id="filterOptions">
    <li class="active"><a href="#" class="all">All</a></li>
    <li><a href="#" class="prem">Premier League</a></li>
    <li><a href="#" class="champ">Championship</a></li>
    <li><a href="#" class="league1">League 1</a></li>
    <li><a href="#" class="league2">League 2</a></li>
  </ul>
 
  <div id="ourHolder">
    <div class="item league2">
      <img src="images/accrington-stanley.jpg" alt="Accrington Stanley" />
      <h3>Accrington Stanley</h3>
    </div>
    <div class="item prem">
      <img src="images/arsenal.jpg" alt="Arsenal" />
      <h3>Arsenal</h3>
    </div>
    <div class="item league2">
      <img src="images/burton-albion.jpg" alt="Burton Albion" />
      <h3>Burton Albion</h3>
    </div>
    <div class="item champ">
      <img src="images/cardiff-city.jpg" alt="Cardiff City" />
      <h3>Cardiff City</h3>
    </div>
    <div class="item champ">
      <img src="images/derby-county.jpg" alt="Derby County" />
      <h3>Derby County</h3>
    </div>
    <div class="item prem">
      <img src="images/everton.jpg" alt="Everton" />
      <h3>Everton</h3>
    </div>
    <div class="item league2">
      <img src="images/morecambe.jpg" alt="Morecambe" />
      <h3>Morecambe</h3>
    </div>
    <div class="item champ">
      <img src="images/norwich-city.jpg" alt="Norwich City" />
      <h3>Norwich City</h3>
    </div>
    <div class="item league1">
      <img src="images/notts-county.jpg" alt="Notts County" />
      <h3>Notts County</h3>
    </div>
    <div class="item champ">
      <img src="images/reading.jpg" alt="Reading" />
      <h3>Reading</h3>
    </div>
    <div class="item league1">
      <img src="images/sheffield-wednesday.jpg" alt="Sheffield Wednesday" />
      <h3>Sheffield Wednesday</h3>
    </div>
    <div class="item prem">
      <img src="images/sunderland.jpg" alt="Sunderland" />
      <h3>Sunderland</h3>
    </div>
    <div class="item prem">
      <img src="images/tottenham-hotspur.jpg" alt="Tottenham Hotspur" />
      <h3>Tottenham Hotspur</h3>
    </div>
    <div class="item champ">
      <img src="images/watford.jpg" alt="Watford" />
      <h3>Watford</h3>
    </div>    
  </div>
</div>
 
</body>
</html>

**danielhagnoul** · 15/04/2013, 00h31

Bonsoir

Première idée, un "select" multiple.

Ma page de test, il suffit de copier-coller pour tester :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		"use strict";
 
		head.js( 
			"http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js", 
			"http://code.jquery.com/jquery-1.9.1.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/i18n/jquery-ui-i18n.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/base.js",
			function(){ 
 
				$( function(){
 
					$( "#filterOptions" ).on( "change", function(){
 
						var ourClass = $( this ).val(),
							boolOK = false;
 
						// debug
						// console.log( ourClass );
 
						if ( ourClass[ 0 ] === "all" ){
							$( "div.item", "#ourHolder" ).show();
						} else {
							$( "div.item", "#ourHolder" )
								.hide()
								.each( function( i, item ){
									boolOK = false;
 
									for ( var j in ourClass ){
										if ( $( item ).hasClass( ourClass[ j ] ) ){
											boolOK = true;
										} else {
											boolOK = false;
											break;
										}
									}
 
									if ( boolOK ){
										$( item ).show();
									}
								});
						}
					});
 
 
				});
 
				$( window ).load( function(){
 
				});
			}
		);
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/sunny/jquery-ui.min.css">
	<style>
		/* TEST -- Nota bene : ici 1 rem est égal à 1 px, voir dvjhRemBase.css */
 
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="http://www.developpez.net/forums/d1331530/jquery/filtrer-divs-avec-class-multiples/">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section id="test" class="conteneur">
 
		<div id="container">
			<select id="filterOptions" multiple>
				<option value="all" checked>All</option>
		    	<option value="prem">Premier League</option>
		    	<option value="champ">Championship</option>
		    	<option value="league1">League 1</option>
		    	<option value="league2">League 2</option>
		     	<option value="param3">param3</option>
		     	<option value="param4">param4</option>
		 	</select>
 
		  	<div id="ourHolder">
		    	<div class="item league2 param3">
		      		<img src="../images/imageTest.png" alt="Accrington Stanley" />
		      		<h3>Accrington Stanley (item league2 param3)</h3>
		    	</div>
		    	<div class="item prem param4">
		      		<img src="../images/imageTest.png" alt="Arsenal" />
		      		<h3>Arsenal (item prem param4)</h3>
				</div>
		    	<div class="item league2 param4">
		      		<img src="../images/imageTest.png" alt="Burton Albion" />
		      		<h3>Burton Albion (item league2 param4)</h3>
		    	</div>
		    	<div class="item champ param3">
		      		<img src="../images/imageTest.png" alt="Cardiff City" />
		      		<h3>Cardiff City (item champ param3)</h3>
		    	</div>
		  	</div>
		</div>
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-04-15T00:18:54.868+02:00" pubdate>2013-04-15T00:18:54.868+02:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
</body>
</html>

Filtrer des divs avec des class multiples

jQuery

Discussions similaires

Partager

Partager