IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Affichage de div


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Futur Membre du Club
    Profil pro
    Inscrit en
    Janvier 2008
    Messages
    3
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2008
    Messages : 3
    Par défaut Affichage de div
    Bonjour à tous

    Je rencontre un problème pour cacher des div contenues dans une autre div.

    Par exemple, si un utilisateur clique sur 'cat 14', toutes les div différentes de 'cat 14' seront cachées. Jusque là pas de soucis !

    A partir de ce même exemple, la div parente "box" contenant '<div id="categorie" cat="2">' reste afficher sans <div id="categorie" cat="2">.

    Ce que je souhaiterai c'est que la div parente "box" ne s'affiche pas si les div contenues à l'intérieur sont cachées.

    J'espère avoir été clair et vous remercie sincèrement par avance pour votre aide

    Voici mon code html:

    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
    <div id="subMain">
            <div id="archivesResult_Content">
                <div id="box">
                <div id="categorie" cat="2">
                    ...
                </div>
                </div>
                <div id="box">
                    <div id="categorie" cat="14">
                        ...
                    </div>
                    <div id="categorie" cat="5">
                        ...
                    </div>
                    <div id="categorie" cat="14">
                        ...
                    </div>
                </div>
                <div id="box">
                    <div id="categorie" cat="13">
                        ...
                    </div>
                </div>
            </div>
        </div>

    Mon code jquery

    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
     $(function(){
        	$('ul#groupCat li').click(function(){
     
        		var catChoice=$(this).attr('cat');
     
        		if(catChoice == "00"){
        					$("#subMain  #archivesResult_Content #box #categorie").slideDown();
        					return;
        		}
     
        		var i=0;
     
        		$("#subMain  #archivesResult_Content #box #categorie").each(function(){
     
        			if($(this).attr("cat") != catChoice){      
     
        				$(this).slideUp();
     
        			}else{
     
        				i++;
        				$(this).slideDown();
     
        			}
     
        		});
     
           });
     
        });
    Merci d'avance pour votre aide

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Bonsoir

    Un ID doit être unique !


    Exemple :

    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
     <ul id="groupCat">
     	<li cat="00">un li</li>
     	<li cat="2">un li</li>
     	<li cat="14">un li</li>
     	<li cat="13">un li</li>
     </ul>
     
     <div id="subMain">
    	<div id="archivesResult_Content">
    		<div class="box">
    			<div class="categorie" cat="2">
    				<p>cat2</p>
    			</div>
    		</div>
    		<div class="box">
    			<div class="categorie" cat="14">
    				<p>cat14</p>
    			</div>
    		</div>
    		<div class="box">
    			<div class="categorie" cat="13">
    				<p>cat13</p>
    			</div>
    		</div>
    	</div>
    </div>

    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
    $( "#groupCat li" ).click( function(){
    	var catChoice = $( this ).attr( 'cat' ),
    		jObj = null;
     
    	if ( catChoice == "00" ){
    		$( "#subMain" ).slideUp();
    		return;
    	}
     
    	$( "#subMain" ).slideDown();
     
    	$( "div.categorie" ).each( function( i, item ){
    		jObj = $( item );
     
    		if ( jObj.attr( "cat" ) != catChoice ){      
    			jObj.parent().slideUp();
    		} else {
    			jObj.parent().slideDown();
    		}
    	});
    });

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  3. #3
    Futur Membre du Club
    Profil pro
    Inscrit en
    Janvier 2008
    Messages
    3
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2008
    Messages : 3
    Par défaut
    Bonjour danielhagnoul et merci pour ta réponse,

    En effet, GROSSE ERREUR DE ID.

    Bon, j'ai corrigé et adapté le code autrement en ajoutant un attribut à la classe demandée.

    J'ai toujours le problème avec le parent pour le cacher.
    Je m'explique:

    Si je choisis 'cat 14' çà fonctionne et les autres div disparaissent
    Si je choisis 'cat 3' çà fonctionne et les autres div disparaissent
    Si je choisis 'cat 13' çà ne fonctionne pas et toutes les div disparaissent

    Merci d'avance pour ton aide précieuse

    Voici mon code html:

    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
        <div id="subMain">
        <div id="archivesResult_Content">
        <div id="archivesResult_title">
        <div class="box">
        <div class="date"></div>
        <div class="categorie" cat="14">
        <div class="categorie" cat="13">
        </div>
        <div class="box">
        <div class="date"></div>
        <div class="categorie" cat="3">
        <div class="categorie" cat="13">
        </div>
        </div>
        </div>

    Voici le code jquery:

    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
    $(function(){
     
     
    	$('ul#groupCat li').click(function(){
     
    		 var
    		    catChoice= $(this).attr('cat'),
    		    $subMain = $("#subMain");
     
     
       		if(catChoice == "00"){
    		    $subMain.find("div.box").slideDown();
    		    $subMain.find("div.categorie").slideDown().removeAttr('catsort');
    		    return;
        	}    	
     
     
        	$subMain.find('div.categorie[cat!="' + catChoice + '"]').slideUp().removeAttr('catsort'); 
     
    		$subMain.find("div.categorie[cat=" + catChoice + "]").attr('catsort', 'Yes').slideDown().parent().slideDown().siblings("div .box").slideUp();
     
     
    	});
     
    });

Discussions similaires

  1. masquage/affichage balise DIV et Opéra
    Par Bensor dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 13/08/2007, 09h41
  2. affichage dans div base de donnée sql infini (horizontalement) en css
    Par Overstone dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 07/08/2007, 14h03
  3. Affichage de div avec temporisation
    Par licorne dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 08/12/2006, 16h13
  4. Connaitre l'ordre d'affichage des div
    Par PrinceMaster77 dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 07/06/2006, 12h40
  5. Pb affichage de DIVs
    Par marti dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 28/12/2005, 13h44

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo