Bonjour à tous,
D'abord, je suis un grand débutant, j'essaie de faire ma première application en js.
Mon objectif est de déplier (développer) un élément du DOM en sous éléments (children) lorsque je click sur cet élément parent.
- Si je click une premiere fois sur l'élément parent (cree via une page php), je le développe en affichant des children que je créé en js.
- Si je click sur l'élément parent une seconde fois alors qu'il est déjà déplier/développé, alors je supprime les children (je referme le dépliage)
pour faire cela, j'ai défini une fonction "developpe" appellée dans l'attribut onClick de ma page de garde générée en php (cette fonction fait le boulot, il me semble)
Dans mon cas, j'affiche sur la page de garde un élément "viandes". Je click dessus, ma fonction "developpe" de l'attribut onClick récupère bien le parametre "viandes" et créé les chidren: boeuf, porc, veau etc..
Or, pour chaque chidren que j'ai créé en js j'ai également spécifié un attribut "onClick" qui fait appel à la même fonction "developpe" qui doit me permettre de développer "porc" (par exemple) en roti, cote, rouelle etc...
Et c'est là que j'ai le probleme. Une fois les children de "viandes" créés, lorsque je click sur "porc" ma fonction "developpe" devrait prendre "porc" en parametre, mais elle me récupère systématiquement "viandes".
Je ne parviens pas à voir où j'ai fais une boulette.
J'ai réduit mon code au minimum pour mettre en évidence ce phénomène.
Ma page principale se nomme index.php, elle inclue une page php categorie.php et fait appelle a developper.js qui contient le code de la fonction "developpe". Le tout est joint dans cette discussion.
La question que je me pose est pourquoi je récupère le parametre "viandes" alors que j'ai clické sur "porc".
Si quelqu'un pouvait jeter un coup d'oeil et me dire ce qui ne va pas cela me permettrai d'avancer.
Merci à tous
index.php:
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 <!DOCTYPE html> <html> <head> <!-- En-tête de la page --> <meta charset="utf-8" /> <title>Le bon prix</title> </head> <body> <h1>Le bon prix</h1> <div> <?php include("./categories.php"); ?> </div> <script src="./developper.js"></script> </body> </html>
categories.php:
Code php : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11 <?php // En réalité je me connecte a une bdd mysql et je fais un select pour récupérer les // catégories alimentaires: viandes, poissons, etc.. // Ici j'ai simplifier au maximum le code ?> <h2 id="<?php echo 'viandes'; ?>" name="<?php echo 'viandes'; ?>" class="niveau1" onclick="developpe(<?php echo '\'viandes\''; ?>)" onmouseover="this.style.cursor='pointer';"><?php echo 'Viandes'; ?></h2> <?php // fin traitement requete mysql ?>
developper.js:
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 function developpe(valElt) { var elt = document.getElementById(valElt); var eltClassName = elt.className; var eltChildLength = elt.childNodes.length; // Si la categorie selectionnee n'a pas d'enfants alors il faut creer les enfants // pour pour simuler un developpement en sous-categories de la catégorie elle-même if (eltChildLength <= 1) { var list = ['Boeuf','Porc']; listLength = list.length; for (var i = 0; i < listLength; i++) { var subElt = document.createElement("h3"); // Création d'un sous élément de balise "h3" subElt.id = list[i].toLowerCase(); // Définition de son identifiant subElt.name = list[i].toLowerCase(); subElt.className = "niveau2"; //subElt.onmouseover = 'this.style.cursor=\'pointer\';'; subElt.setAttribute("onmouseover", 'this.style.cursor=\'pointer\';'); subElt.onClick = 'developpe(' + list[i].toLowerCase() + ')'; subElt.appendChild(document.createTextNode(list[i])); // Définition de son contenu textuel elt.appendChild(subElt); // Insertion du nouveau sous-élément } // Si la categorie selectionnee a des enfants alors il faut les supprimer } else { var children = elt.childNodes; for ( var i = eltChildLength - 1; i >= 1; i-- ) { elt.removeChild(children[i]); } } }
Partager