Boucler sur des éléments

**_youri** · 16/05/2018, 07h14

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** · 16/05/2018, 11h47

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** · 16/05/2018, 14h51

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** · 16/05/2018, 15h03

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** · 16/05/2018, 15h31

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** · 16/05/2018, 17h44

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 ?

**Toufik83** · 16/05/2018, 18h08

pour te répondre il faut nous montrer le code html généré.

**_youri** · 16/05/2018, 18h13

Voilà le code html

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans nom</title>
</head>
 
<body>
<table  align="center">
  <tr height="17">
    <td width="25%"></td>
  </tr>
  <tr>
    <td width="30%"><a href="#" id="1" >Soudain l’été dernier</a></td>
  </tr>
  <tr>
    <td><a href="#" id="2">Un tramway nommé désir</a></td>
  </tr>
  <tr>
    <td><a href="#" id="3">Portrait d’une Madone</a></td>
  </tr>
</table>
<table align="center">
  <tr>
    <td valign="top" width="325"><div style="position:absolute;  width:325px; height:200px;">
        <table id="gallerie" style="position:absolute;" cellpadding="0" cellspacing="0" border="0">
          <tr>
            <td height="310" width="330" ><img src="img/portrait.jpg"></td>
          </tr>
          <tr>
            <td height="310" width="330" ><img src="img/portrait1.jpg"></td>
          </tr>
          <tr>
            <td height="310" width="330"><img src="img/portrait2.jpg"></td>
          </tr>
        </table>
      </div></td>
  </tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <!-- jQuery est inclus ! -->
   <script >
 
	$("#1,#2,#3").click(function(){alert("id du bouton cliqué :"
     +$(this).attr('id')
     +', top :'+(-310*$(this).index())
     +', i :'+$('td').index());
$('#gallerie').css("marginTop",-300*($(this).index())+'px');
})
 
    </script>
</body>
</html>

**Toufik83** · 16/05/2018, 18h36

oui, cela fonctionne pas par-ce que l'index vaut toujours 0, mais avant de continuer, c'est déconseillé d'utiliser des chiffres comme des Id.
tout d'abord on change les id des éléments a.

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<tr height="17">
    <td width="25%"></td>
  </tr>
  <tr>
    <td width="30%"><a href="#" id="_1" >Soudain l’été dernier</a></td>
  </tr>
  <tr>
    <td><a href="#" id="_2">Un tramway nommé désir</a></td>
  </tr>
  <tr>
    <td><a href="#" id="_3">Portrait d'une Madone</a></td>
  </tr>

puis c'est en fonction de l'id qu'on va traiter le marginTop

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
$("#_1,#_2,#_3,#_4").click(
  function(e) {
    e.preventDefault(); //inhiber le lien
    $('#gallerie')
    .css("marginTop", +(-310 * parseInt($(this).attr('id')-1)) + 'px');
    console.log("id du bouton cliqué :" +$(this).attr('id') 
      + ', top :' + (-310 * parseInt($(this).attr('id')-1)) 
      +', i :' + parseInt($(this).attr('id')-1));
 
  });