Discussion :

[_youri]

Bonjour,
J'ai une série de boutons en JQuery qui se présentent sous cette forme et je voudrais mettre une boucle à la place. Comment faire ? Merci

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
    $('#1').click(function() {
			  $('#gallerie').css("top","0px");
          });
    $('#2').click(function() {
			  $('#gallerie').css("top","-310px");
          });
    $('#3').click(function() {
			  $('#gallerie').css("top","-620px");
          });
    $('#4').click(function() {
			  $('#gallerie').css("top","-930px");
          });

[_youri]

j'ai essayé avec cette syntaxe mais ça ne donne aucun résultat

Code :

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

1
2
3
4
5
6
7
8
9
for (var i=1; i<20; i++) {
    //console.log(i);
 
	$('#'+i).click(function() {
			  $('#gallerie').css("top",-310*(i-1)+'px');
          });
 
 
}

[Toufik83]

pour que la propriété top puisse être modifiée, il faut que la "gallerie" ait une position absolute en css, Ou utiliser marginTop, au lieu de top.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
$('#1').click(function() {
			  $('#gallerie').css("marginTop","0px");
          });
    $('#2').click(function() {
			  $('#gallerie').css("marginTop","-310px");
          });
    $('#3').click(function() {
			  $('#gallerie').css("marginTop","-620px");
          });
    $('#4').click(function() {
			  $('#gallerie').css("marginTop","-930px");
          });

[_youri]

ok, donc au niveau du code ça donne ça ?

Code :

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

1
2
3
4
5
6
7
8
9
for (var i=1; i<20; i++) {
 
	$('#'+i).click(function() {
			  $('#gallerie').css("marginTop",-310*(i-1)+'px');
                          alert("bouton cliqué"+i);
          });
 
 
}

il doit y avoir une erreur car alert("bouton cliqué"+i); me renvoie toujours le nombre 20 et non le bon numéro du bouton sur lequel j'ai cliqué !

[Toufik83]

pour ne pas compliquer les choses, tu peux utiliser un selecteur jQuery qui factorise les 4 éléments.

Code :

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

1
2
3
4
5
6
7
8
9
 
$("#1,#2,#3,#4").click(function(){
$('#gallerie').css("marginTop",-310*($(this).index())+'px');
     alert("id du bouton cliqué :"
     +$(this).attr('id')
     +', top :'+(-310*$(this).index())
     +', i :'+$(this).index());
 
});

[_youri]

merci, ça marche nickel ! par contre il se trouve que si je mets les liens dans une <table> le script jQuery ne fonctionne plus. C'est un problème de ciblage ?