Comment utiliser une variable dans un sélecteur ?

Version imprimable

Bonjour,

Pouvez vous m'expliquer comment utiliser une variable dans un sélecteur jQuery?

L'idée c'est de faire:

Code:

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
<!DOCTYPE html> <!--on declare au validator le langage utilisé-->
<html>
<head>
 
<!-- Bootstrap core CSS -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">		<!--déclaration du fichier CSS dans sa version minifiée-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 
<style type="text/css">
#image1{position: relative; z-index:200;}
#image2{position: relative; z-index:200;}
#image2{position: relative; z-index:200;}
#close1{z-index:1000;}
#close2{z-index:1000;}
#close3{z-index:1000;}
</style>
 
</head>
 
<body>
 
<img src="close.png" id="close1" class="img-circle" />
<img src="close.png" id="close2" class="img-circle" />
<img src="close.png" id="close3" class="img-circle" />
 
<img src="gravure1petit.jpg" id="image1" />
<img src="gravure2petit.jpg" id="image2" />
<img src="gravure3petit.jpg" id="image3" />
 
<br><br><br><br><br><br><br><br><br><br>
 
<span id="afficher"></span>
 
<script src="jquery.js"></script>
<script>
jQuery(document).ready(function(){                                      /*attente de la disponibilite du DOM*/
 
        for (i=0, i<4, i++) {
        var coord_image+i = $('#image'+i).offset();             /*variable intermediaiare qui recupere les coordonnees, position absolue, de l'image de classe imagei*/
                $('#close'+i).offset(coord_image+i);            /*on modifie les coord de l element de classe closei
        
});
</script>
 
</body>                                         
 
</html>

Cordialement

24/03/2015, 16h11
SpaceFrog

Je pense que le souci est plutôt au niveau de la compréhension de offset() ...

http://api.jquery.com/offset/

Merci SpaceFrog

offset() me permet de placer les pastilles(image close) en haut à gauche des grandes images

ça fonctionne très bien avec l'écriture suivante:

Code:

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
53
54
<!DOCTYPE html> <!--on declare au validator le langage utilisé-->
<html>
<head>
 
<!-- Bootstrap core CSS -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">		<!--déclaration du fichier CSS dans sa version minifiée-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 
<style type="text/css">
#image1{position: relative; z-index:200;}
#image2{position: relative; z-index:200;}
#image2{position: relative; z-index:200;}
#close1{z-index:1000;}
#close2{z-index:1000;}
#close3{z-index:1000;}
</style>
 
</head>
 
<body>
 
<img src="close.png" id="close1" class="img-circle" />
<img src="close.png" id="close2" class="img-circle" />
<img src="close.png" id="close3" class="img-circle" />
 
<img src="gravure1petit.jpg" id="image1" />
<img src="gravure2petit.jpg" id="image2" />
<img src="gravure3petit.jpg" id="image3" />
 
<br><br><br><br><br><br><br><br><br><br>
 
<span id="afficher"></span>
 
<script src="jquery.js"></script>
<script>
jQuery(document).ready(function(){				/*attente de la disponibilite du DOM*/
	var coord_image1 = $('#image1').offset();	/*variable intermediaiare qui recupere les coordonnees, position absolue, de l'image de classe image1*/
	$('#afficher').text('Ximage='+coord_image1.left+' Yimage='+coord_image1.top);
	$('#close1').offset(coord_image1);			/*on modifie les coord de l element de classe close1*/
 
	var coord_image2 = $('#image2').offset();	/*variable intermediaiare qui recupere les coordonnees, position absolue, de l'image de classe image1*/
	$('#afficher').text('Ximage='+coord_image2.left+' Yimage='+coord_image2.top);
	$('#close2').offset(coord_image2);			/*on modifie les coord de l element de classe close2*/
 
	var coord_image3 = $('#image3').offset();	/*variable intermediaiare qui recupere les coordonnees, position absolue, de l'image de classe image1*/
	$('#afficher').text('Ximage='+coord_image1.left+' Yimage='+coord_image3.top);
	$('#close3').offset(coord_image3);			/*on modifie les coord de l element de classe close3*/
});
</script>
 
</body>                                         
 
</html>

Ce que je veux c'est automatiser l'écriture jQuery avec une incrémentation i++

quelle est ton erreur dans ton 1er script , tu utilises la bonne méthode pour utiliser une variable dans un sélecteur en JQuery, mais tu as des erreurs de syntaxe, ici
Code:

1 2 3 4 5 6 for (i=0, i<4, i++) { var coord_image+i = $('#image'+i).offset(); /*variable intermediaiare qui recupere les coordonnees, position absolue, de l'image de classe imagei*/ $('#close'+i).offset(coord_image+i); /*on modifie les coord de l element de classe closei });
Pourquoi faire

Code:

var coord_image+i

tu concatènes un nom de variable avec la valeur d'une variable , je comprends pas ce que tu veux faire la mais ça m'a l'air inutile, cela suffit :
Code:

1 2 3 4 5 6 for (i=0, i<4, i++) { var coord_image = $('#image'+i).offset(); /*variable intermediaiare qui recupere les coordonnees, position absolue, de l'image de classe imagei*/ $('#close'+i).offset(coord_image); /*on modifie les coord de l element de classe closei });

Merci pour ta contribution

L'erreur vient aussi de l'écriture for (i=1; i<4; i++); j'avais mi des "," alors qu'il faut des ";"

Pour ceux que ça intéresse les écritures suivantes permettentd'incorporer des variables dans les sélecteurs jQuery:
Code:

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 for (i=1; i<4; i++) { var coord_image = $('#image'+i).offset(); $('#close'+i).offset(coord_image); } for (i=1; i<4; i++) { var coord_image = $('#image'+i).offset(); $('#close'+i).offset(coord_image); } for (i=1; i<4; i++) { var id_image="#image"+i; var coord_image = $(id_image).offset(); var id_close="#close"+i; $(id_close).offset(coord_image); } for (i=1; i<4; i++) { var coord_image = $('#image'+[i]).offset(); $('#close'+[i]).offset(coord_image); }