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

JavaScript Discussion :

afficher / masquer les div d'une série de div appeler par un while


Sujet :

JavaScript

  1. #1
    Membre du Club
    Profil pro
    Inscrit en
    Avril 2010
    Messages
    187
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2010
    Messages : 187
    Points : 50
    Points
    50
    Par défaut afficher / masquer les div d'une série de div appeler par un while
    Bonjour voici
    j'utilise une requete PHP pour appeler des livres qui sont dans ma base de données, ceci grâce a une boucle PHP while.
    pour chaque livre j'affiche donc :
    - le titre
    - l'auteur
    - et une quatrième de couverture
    c'est la qu’intervient mon javascript
    afin de cacher cette quatrième de couverture (qui peut être parfois lonnnngue)
    j'ai donc créer grâce a un "span", un bouton qui me permet de masquer ou d'afficher cette quatrième de couverture

    mon problème est comment faire en sorte que quand je clic le sur "le bouton afficher ou masquer" de la quatrième de couv de mon 2ème livre, ou 3ème ou autre...
    ca ne referme pas celle de mon 1er livre ???
    voir le résultat ici : https://clesdasie.fr/bibliotheque/?pageActuelle=2
    - est-ce une histoire de code mal placé ?
    - est-ce qu'il faut créer des id différentes pour toutes les quatrième de couv de mes livres ?
    n'y a t'il pas un moyen simple
    que feriez vous ?
    merci beauuuucoup !

    voici mon code :
    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
     
    <?php
    // requete PHP pour lister la liste des livres
    $reponse2 = $bdd->query("SELECT * 
                                                    FROM livres
                                                    LEFT JOIN livres_categorie
                                                    ON livres.code_categorie = livres_categorie.code_categorie_livres_categorie
                                                    $whereRequete
                                                    ORDER BY titre
                                                    ASC
                                                    LIMIT $numDeDepart,$nbParPages
                                                    ") or die(print_r($bdd->errorInfo()));
                                                    
     
    while ($donnees2 = $reponse2->fetch())
    {
    $titre = stripslashes ($donnees2['titre']);
    $auteur = stripslashes ($donnees2['auteur']);
    $quatre_de_couv = stripslashes($donnees2['4couv']);
    ?>
    <div class="livre">
    		<?php
                            
                            echo '
                            <div class="texte-liste-livre">
                                    <h3>'.$titre.'</h3>
                                    <p>Auteur : <strong>'.$auteur.'</strong></p>
                                    <p>Quatrième de couverture :</p>
                                    <span class="bouton" id="bouton_texte" onclick="javascript:afficher_cacher(\'texte\');">Afficher le texte</span>
                                            <div id="texte" class="texte">
                                                    <p class="quatreDeCouv">'.$quatre_de_couv.'</p>
                                            </div>';
                            echo '</div>';
                    ?>
    		<script type="text/javascript">
    			function afficher_cacher(id)
    			{
    				if(document.getElementById(id).style.display=="none") // si il est cacher j'utilise le double "==" pour lire sont etat
    				{
    					document.getElementById(id).style.display="block"; // le rendre visible sous forme de block en lui attribuant la valeur avec un simple "="
    					document.getElementById('bouton_'+id).innerHTML='Cacher le texte';
    				}
    				else
    				{
    					document.getElementById(id).style.display="none"; // sinon le cacher, donc il apparaitera toujours de base caché sauf si je clic sur le bouton
    					document.getElementById('bouton_'+id).innerHTML='Afficher le texte';
    				}
    				return true;
    			}    
    			afficher_cacher('texte'); // j'appelle la fonction qui sera executée
    			// j'ai appelé la fonction afficher_cacher à la fin du texte c'est simplement pour que dès le chargement de la page, le texte soit caché.
    		</script>
    </div><!-- class="livre" -->
    <?php
    }
    ?>

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 075
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 075
    Points : 44 667
    Points
    44 667
    Par défaut
    Bonjour,
    mon problème est comment faire en sorte que quand je clic le sur "le bouton afficher ou masquer" de la quatrième de couv de mon 2ème livre, ou 3ème ou autre...
    ca ne referme pas celle de mon 1er livre ???
    pas vu sur ton lien ce que tu voulais faire

    - est-ce qu'il faut créer des id différentes pour toutes les quatrième de couv de mes livres ?
    n'y a t'il pas un moyen simple
    tu pourrais même te passer des ID, voir du JavaScript, en ciblant l'élément suivant avec nextElementSibling.

Discussions similaires

  1. Afficher masquer les cellules d'un tableau selon la valuer d'une zone de texte
    Par maghrebi79 dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 08/03/2018, 09h57
  2. Masquer les composants d'une div
    Par new_wave dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 03/02/2017, 23h06
  3. Afficher/Masquer un <DIV> au clique de la souris.
    Par Joad dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 24/09/2005, 10h55
  4. afficher tous les champs d'une table
    Par julio84 dans le forum ASP
    Réponses: 8
    Dernier message: 19/01/2005, 10h31
  5. Afficher tous les champs d'une table avec dbexpress et MySQL
    Par LHT dans le forum Bases de données
    Réponses: 2
    Dernier message: 25/06/2004, 17h11

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