Utiliser la fonction jquery dans une boucle

**EthanPlg** · 10/12/2014, 12h02

Bonjour,

Je suis confronté a un problème. Je dispose de plusieurs blocs sur lesquels j'aimerais traiter la même fonction, a l'identifiant prés. C'est pour un système d'upload.

Pour faire un exemple clair : Je souhaite afficher le nom du bloc sur lequel je clique. Pour le bloc 1 cela marche, il est écrit littéralement. Mais pour ceux qui sont issus de la boucle, seul la valeur 11 semble être la norme. (Alors que le console.log m'affiche correctement tout les id.)

J'imagine que ce que je propose est bancale, mais je n'ai pas trouvé d’équivalent propre sur internet...

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
<!DOCTYPE HTML>
<html>
<head>
	<meta charset= "utf-8" lang= "fr" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
	<div id="test1">test bloc 1</div>
	<div id="test2">test bloc 2</div>
	<div id="test3">test bloc 3</div>
	<div id="test4">test bloc 4</div>
	<div id="test5">test bloc 5</div>
	<div id="test6">test bloc 6</div>
	<div id="test7">test bloc 7</div>
	<div id="test8">test bloc 8</div>
	<div id="test9">test bloc 9</div>
	<div id="test10">test bloc 10</div>
	<div id="test11">test bloc 11</div>
	<script type="text/javascript" src="probleme.js"></script>
</body>
</html>

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
//La fonction de test
 
function fonctionexterne(numbloc) {
	alert("Je suis sur le bloc "+numbloc);
}
 
//On implemente le comportement du premier bloc pour les test (qui marche)
 
$("#test1").click(function() {
		fonctionexterne(1);	
	});
 
//Ensuite on essaye donc de generer le comportement pour tout mes blocs (ce qui ne marche pas)	
 
for (j=2;j<=11;j=j+1) {
 
		reff = "#test";
		reff += String(j);
 
	$(reff).click(function() {
		fonctionexterne(j)
	});
 
	console.log(reff);
}

**Kaamo** · 10/12/2014, 12h38

Salut !

Une piste possible

**SpaceFrog** · 10/12/2014, 13h00

http://fiddle.jshell.net/denfq95q/

**EthanPlg** · 10/12/2014, 18h05

Merci pour vos réponses

Le code sur jsshell ne marchait pas tout a fait, je l'ai adapté de la manière qui suit :

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
//La fonction de test
 
function fonctionexterne(numbloc) {
	alert("Je suis sur le bloc "+numbloc);
}
 
//On implemente le comportement du premier bloc pour les test (qui marche)
 
$("#test1").click(function() {
		fonctionexterne(1);	
	});
 
//Ensuite on essaye donc de generer le comportement pour tout mes blocs (ce qui ne marche pas)	
 
 $("[id^='test']").on("click", function(){
        nr=$(this).attr('id').match(/\d+/);
        fonctionexterne(nr[0])
    })  ;

En plus j'arrive a comprendre ce qui est fait.
Merci, je met donc en résolu.

Cependant je suis curieux de savoir pourquoi mon premier code ne marchait pas, pour quelle raison ce n'était pas possible ?

Utiliser la fonction jquery dans une boucle

jQuery

Discussions similaires

Partager

Partager