Comment utiliser une variable dans un sélecteur ?

**binco** · 24/03/2015, 16h03

Bonjour,

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

L'idée c'est de faire:

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
<!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

**SpaceFrog** · 24/03/2015, 16h11

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

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

**binco** · 24/03/2015, 16h33

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 :

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
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++

**-Rpass-** · 24/03/2015, 17h09

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 :

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

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 :

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

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 :

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

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
 
});

**binco** · 25/03/2015, 00h12

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 :

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
 
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);
}

Comment utiliser une variable dans un sélecteur ?

jQuery

Vue hybride

Discussions similaires

Partager

Partager