Discussion :

[Ecared]

Bonjour à tous,

Alors voilà je suis débutant en JQuery, je pense que mon problème est vraiment simple mais je veux acquérir les bonnes pratiques tout de suite alors je fais appel à vous !

Je vous mets une image tout de suite pour que ça soit claire:



L'objectif est que lorsque que l'on clique sur le bouton "spécial" que des div s'affichent. Et que lorsque l'on clique sur un autre bouton ces fameuses div disparaissent. A noter qu'il s'agit d'un slider de paramétrage de pièce d'une maison. C'est à dire que le nombre de div principal est donc variable.

J'ai réussi à le faire sur un bloc sans problème, mais lorsque que l'on a plusieurs div et que je clique sur "spécial" il m'affiche les div inférieurs dans toutes me div de la sorte:

Et idem que je clique sur un autre bouton il me supprime les div inférieurs partout.

J'aimerai donc pouvoir cibler précisément les éléments d'une seule div mais en prenant en compte le côté variable du nombre de celle-ci.

Je ne sais vraiment pas si c'est clair! Si vous avez besoin de plus de précisions ou des pistes de recherches à me transmettre ce serait super!

Merci

[sekaijin]

rien compris au besoin


vu que tu est débutant en JQuery je te conseil de poster dans le forum JQuery tu auras plus de chance d'avoir des réponses pertinentes.

ensuit pour cibler un élément en particulier en HTML il suffit de lui mettre un id
un id est un identifiant unique dans la page (de préférence pas un n°)

JQuery javascript etc. permettent d'obtenir l'élément à partir de son id.

pour ce qui est de cacher ou monter des div les éléments html ont un attribut de vivibilité ainsi qu'un attribut css display.

A+JYT

[Ecared]

Alors j'ai trouvé ma solution, désolé je pense que ma question n'était pas assez claire. Je vous explique ce que j'ai fait ça pourra toujours aider quelqu'un.

En raccourci le code ressemblait à:

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
<div class="bloc">
<button>Ouvrir le bloc</button>
<div class="bloc_cache"></div>
</div>
 
<div class="bloc">
<button>Ouvrir le bloc</button>
<div class="bloc_cache"></div>
</div>
 
<div class="bloc">
<button>Ouvrir le bloc</button>
<div class="bloc_cache"></div>
</div>

Avec un nombre aléatoire de .bloc.
Le comportement que je voulais obtenir était qu'en cliquant sur "Ouvrir le bloc" le .bloc_cache apparaisse mais seulement pour le .bloc concerné. Le tout sans répété une fonction pour chaque bloc possible j'ai donc fait (toujours en très résumé):

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<div class="bloc">
<button onclick="javascript:afficher('1');">Ouvrir le bloc</button>
<div id="bloc1" class="bloc_cache"></div>
</div>
 
<div class="bloc">
<button onclick="javascript:afficher('2');">Ouvrir le bloc</button>
<div id="bloc2" class="bloc_cache"></div>
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function afficher(id){
var elmt = $('#bloc'+id);
elmt.show();
}

Rien de compliqué je vous l'accorde mais ça pourra toujours servir pour un autre débutant JQuery tel que moi

[sekaijin]

<button onclick="javascript:afficher('1');">
cette syntaxe est incorrecte elle fonctionne parfois

<button onclick="afficher('1');">
les quotes ne sont pas utile. js se débrouille très bien avec les entier

<button onclick="afficher(1);">

[Ecared]

Nickel merci beaucoup pour ces précisions niveau optimisation !