Afficher des div générées par du code

Version imprimable

11/04/2013, 09h53
Erukay

Afficher des div générées par du code

Bonjour à tous !

Je suis tout nouveau sur le forum, je suis en en stage pour mon DUT INFO et il s'avère que j'ai besoin d'aide. J'espère que vous pourrez me répondre. Je pense que ce type de question a déjà été posée sur le forum mais je ne sais pas comment se formule la demande du coup je n'ai pas retrouvé la réponse si elle a déjà été postée.

Je génère deux div avec un nom concaténé à une variable incrémentée (exemple contenu.$i et top.$i entraînera à la fin de mon code contenu1 contenu2 contenu3 contenu4 et top1 top2 top3 top4... ainsi de suite) en fonction de résultats récupérés dans ma BDD.

Comment faire pour que quand je clic sur top1, contenu1 s'affiche ou se cache (de même pour top2 avec contenu2 etc...) ? Sachant qu'il faut que ce code soit dynamique car si il y a de nouvelles informations dans ma BDD, d'autre div contenu.$i et top.$i apparaîtront et j'aimerai également appliquer ces effets sur ces nouvelles div ?

J'ai un début de code en javascript mais actuellement l'effet s'applique a toutes mes div si : si je clic sur n'importe quel top, tous les contenus disparraîtron ou apparaîtron.

En espérant avoir été assez clair ! Si il faut j'ajouterai mon code :)

Merci !
11/04/2013, 10h09
Bovino
Bon pour commencer

Citation:

Afficher des div générées par du code

Je vois pas trop comment tu peux générer une div autrement que par du code... :koi:
J'ai bien tenté à une époque l'apposition des mains sur l'écran, mais le résultat n'a pas été probant ! :aie:

Bref, sinon, tu as la possibilité lors du clic de récupérer l'indice de l'id de l'élément cliqué puis d'en déduire l'id de l'élément à afficher, mais ça ne me semble pas la meilleure solution.
Je te conseillerais plutôt d'adapter ta structure HTML à tes besoins et de rajouter une classe unique à tous les éléments à cacher/afficher (afin de les masquer tous lors du clic) ainsi que des attributs data-* aux éléments cliquables qui indiqueraient quel est l'élément à afficher.

En gros, ça donnerait un truc du style
Code:

1 2 <div id="top0" data-rel="contenu0">Lien</div> <div class="contenu" id="contenu0">Contenu</div>
Enfin, tu peux t'inspirer des tutos existants sur les systèmes d'onglets...
:fleche: Mise en place d'une navigation par onglets avec jQuery
:fleche: Créer une boîte d'onglets à la mode Web 2.0 avec jQuery - Partie 2 : le code JavaScript
11/04/2013, 10h10
SpaceFrog

Citation:

Si il faut j'ajouterai mon code

Commence par là ...

Au moins on saura si tu utilises jquery ou pas car ce n'est pas des plus clairs dans ton explication ...
11/04/2013, 10h21
Erukay

Quand je dis généré par du code c'est a dire que c'est pas statique mais dynamique je me suis mal exprimé mais au moins avec un nom aussi débile que celui-la pour mon post, les gens viendront ne serait-ce que pour ce foutre de moi xD.
Ce que tu m'expliques Bovino justement je l'ai déja fais, mon code html actuellement ressemble a ce que t'as mit et si y a une nouvelle ligne dans ma BDD, une nouvelle div contenu1 top1 sera créée en plus de contenu0 top0.
Je voudrais trouver un moyen pour que top0 affiche contenu0 et top1 contenu1 par exemple.

Je sais quand même si j'utilise du jquery ou non, j'ai mes limite dans ma débilité.

Bah dans ce cas, c'est pourtant simple...

Code:

1
2
<div class="top" id="top0" data-rel="contenu0">Lien</div>
<div class="contenu" id="contenu0">Contenu</div>

Code:

1
2
3
4
$('.top').on('click', function(){
    $('.contenu').hide();
    $('#' + $(this).data('rel')).show();
});

11/04/2013, 11h12
Erukay

Merci pour ce code. Ca ne fonctionne pas mais j'ai au moins une bonne base :)
12/04/2013, 21h29
danielhagnoul
Bonsoir

Le titre : "des div générées par du code" se traduit par "divisions générées dynamiquement", c'est toujours et encore le même et éternel problème déjà traité X dizaines de fois sur ce forum.

Puisque vous ne nous donnez aucune base de réflexion, par rapport au code de Bovino, qui serait généré dynamiquement :
Code:

1 2 3 $( "body" ).on( "click", ".top", function(){ // votre code });