Cacher une div avec Jquery, dans une boucle

Indépendance de chaque ligne de la bdd

4 avril 2020 à 22:44:34

Bonjour à tous,

je vous remercie d'avance pour l'aide que vous pourrez m'apporter , et aussi pour avoir pris la peine de me lire.

Je débute en javascript/php, et je viens de tester une fonction jquery qui consiste à afficher une DIV cachée.

DANS LE HEAD

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
     <script>
         $(document).ready(function(){
             $('#show').click(function() {
               $('.cachecache').toggle("slide");
             });
         });
    </script>

DANS LE BODY

echo'
<div id="show">
<li>
<b>&nbsp;'.$mot.' </b>
</li>
</div>
<div class="cachecache" style="display: none;">
'.$definition.'<br />
'.$exemple.'<br />
</div>
';

ça fonctionne très bien, lorsqu'il y a une seule donnée.

Concrètement, il s'agit d'un dictionnaire, qui affiche la définition et son exemple lorsque l'on clique sur le mot.

Je souhaite l'intégrer dans une boucle et récupéré mes données dans la BDD mysql

en faisant cela, logiquement tous les mots sont dans une DIV avec id="show", et toutes les définitions et exemple sont dans une div de class="cachecache"

Résultat :

Seul le premier mot est cliquable et tout se développe.

Ce que je souhaite faire :

Ne faire apparaitre que la définition et l'exemple du mot.

Avez vous des pistes ?

je suis un peu perdu, car je ne comprends pas pourquoi seul le premier mot déclenche l'action (techniquement tous les mots devraient déclencher le développement ?

et je n'ai pas d'idée pour identifier différement chaque mot, tout en gardant le script contenu dans le head.

Merci d'avance pour votre aide.

Eric

Eric (https://www.lespoetes.net)

Lartak

4 avril 2020 à 23:27:52

Bonsoir.

C'est normal, la valeur d'un attribut id doit être unique sur une page.

Par conséquent tu ne peux pas faire une boucle en PHP et définir la même valeur d'attribut id à plusieurs éléments.

Autre chose, que ce soit pour la balise ul ou ol, le seul élément enfant direct autorisé est la balise li, rien d'autre et la balise b à à proscrire.

-
Edité par Lartak 4 avril 2020 à 23:30:03

Face a quelqu'un pour qui l'on n'éprouve que de l'aversion et du mépris, les yeux d'un homme deviennent extrêmement froids et cruels.

Rickways

4 avril 2020 à 23:36:27

Bonsoir, merci pour votre premier retour,

effectivement c'est donc logique que seul le premier id réagisse...

mais sinon, avez-vous une idée sur ce que je dois faire lorsque je veux faire la même chose en utilisant une boucle avec une base de données ?

(en ce qui concerne la balise b, mais c'est moins important pour moi actuellement, je dois donc donner une class à mon li pour intégrer le caractère gras ?)

Eric (https://www.lespoetes.net)

Lartak

5 avril 2020 à 0:30:02

Tu peux par exemple faire comme ceci.

Tu peux effectivement donner une classe au li et appliquer la mise en gras directement en CSS, ou alors utiliser la balise strong, qui elle est faite pour ça et est toujours valide.

Face a quelqu'un pour qui l'on n'éprouve que de l'aversion et du mépris, les yeux d'un homme deviennent extrêmement froids et cruels.

Rickways

5 avril 2020 à 1:33:45

Merci je teste

-
Edité par Rickways 5 avril 2020 à 17:37:30

Eric (https://www.lespoetes.net)

claudebriard

5 avril 2020 à 17:48:25

Bonjour Rickways

Dans ta boucle je suggère que tu donnes un id différends à chaque div, exemple show_index où index sera le numéro fourni en retour par ta base de données ( si n enregistrement s en retour, index varie de 1 à n ou 0 à n-1 selon le cas)

Ensuite tu appliques ton évènement à chaque div via son id unique, car au final c'est bien ce que tu souhaites.

Cela implique d'introduire le code javascript directement lors de la création de la div et de récupérer cet objet div via un document.getElementById("show_index") ou index prend sa valeur de 1 à n

ensuite tu appliques ton event à ton objet div dans le code javascript.

et tu boucles sur l’élément suivant.

Cordialement

Rickways

5 avril 2020 à 20:39:38

Merci à vous deux pour vos propositions,

Claudebriard, je me suis appuyé sur l'exemple de Lartak, car j'ai vraiment du mal, et après une journée de test, j'ai réussi à l'adapter (comme j'ai pu) à mon cas personnel...

Si ce n'est pas trop demandé, j'aurai une dernière question,

lorsque je clique sur le mot à définir, la définition apparaît, et lorsque je clique sur un autre mot, la première définition disparaît et la nouvelle apparaît, ce qui est parfait, mais si la définition est trop longue, lorsque l'on clique sur un nouveau mot, la page se replie et du coup on se retrouve en bas de page, loin du mot sur lequel on a cliqué....

Est-ce qu'il y a un truc pour pouvoir rester à l'endroit où l'on a cliqué ?

(exemple : https://lespoetes.net/dictionnaire.php

cliquer sur ACROSTICHE, puis essayer le mot d'en dessous ADYNATON)

Eric

Eric (https://www.lespoetes.net)