Discussion :

[mfredok]

Bonjour à tous,

Chose simple en JS mais en Jquery, je tourne en rond , pff:

Je cherche à parcourir chaque div cachée et à chaque pression sur le bouton afficher la div 1 puis la div 2, etc... donc en boucle. J'ai fais ceci..mais là je sèche.."alert" est proche de ce que je souhaite.

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
 
<script type="text/javascript" charset="utf-8">
$().ready( function () {
	$('#q_containers .q_container').hide();
	$('button').click( function (){
		$('.q_container').each (function(i)	  {
			alert("div numero :" + i)
			$(this).eq().show();
		});	
	}); 
});//FIN Document.ready 
 
 
</script>
</head>
 
 
<button>bouton</button>
 
<div id="q_containers" style="overflow:hidden;">		  
 
 <div class="q_container" id="q_container_1">1111</div>
 <div class="q_container" id="q_container_2">2222</div>
 <div class="q_container" id="q_container_3">3333</div>
 <div class="q_container" id="q_container_3">4444</div>
 
</div>

Merci de votre aide

[coach759]

Bonjour,

Il suffit que tu déclare un "compteur" de click, et que tu affiche le div correspondant, comme ceci:

Code :

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

1
2
3
4
5
6
7
8
9
 
$().ready( function () {
    $('#q_containers .q_container').hide();
    var cpt=0;
    $('button').click( function (){
        cpt++;
        $('#q_container_'+cpt).show();
    });	
});

Et le tour est joué.
N'hésite pas si tu as des problèmes ou des questions

[mfredok]

bonjour,

Merci de ton aide,

J'ai omis un detail : chaque div affiché remplace l'autre, comme une sorte de carroussel par exemple.

Avec ton code, j'affiche bien le contenu de la premiere DIV. en recliquant sur le bouton, le contenu de la deuxieme DIV ne s'affiche pas..

Merci encore

[coach759]

Tu ajoutes deux petites ligne

Code :

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

1
2
3
4
5
6
7
 $('button').click( function (){
	if(cpt>=$('#q_containers .q_container').length)cpt=0;
	$('#q_containers .q_container').hide();
        cpt++;
        $('#q_container_'+cpt).show();	
    });

Comme ça, tu as l'effet "carroussel" recherché

[Arnaud F.]

Bonjour,

il y a deux erreurs dans votre code.

La première, c'est :

Code :

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

$(document).ready();

et non

Code :

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

$().ready();

Ensuite,

Code :

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

1
2
3
$("button").click(function() {
    $(".q_container:hidden:eq(0)").show();
});

++

[mfredok]

Avec ces 2 lignes en +rien ne s'affiche en appuyant sur le bouton.

Tu fermes ton "if"où ?
Il faut peut être un "else" à la suite aussi ?

j'ai fais plusieurs tests mais rien..désolé.

Merci

[mfredok]

Merci à tous les 2,

Arnaud F., ton code marche parfaitement, l'affichage de chaque div se fait les unes en dessous des autres..je cherche juste replacer chaque DIV au même emplacement, c-à-d àla palce de la div1..a prioir il fuat utiliser la fonction append ou html ..Merci