Portée variables, objets dans jQuery

Version imprimable

Bonjour,

je planche depuis quelques jours sur une question de variable privée à l'intérieur d'un plugin jQuery.

Avant d'aller plus loin, voici mon code test :
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 /* PLUGINNAME */ (function($){ $.fn.test = function(options){ var opts = $.extend({},$.fn.test.defaults,options); return this.each(function(){ init($(this)); opts.callback(); }); function init(obj){ var ref = obj; var o = $.meta ? $.extend({}, opts, obj.data()) : opts; o.param = obj.text(); console.log(o.param+' : '+ref.text()); // me renvoi bien "instance 1" puis "instance 2" obj.append('<a class="testeur" href="#" title="click test">click test</a>'); obj.children('.testeur').each(function(){ $(this).click(function(e){ e.preventDefault(); testeur(ref,o); }); }); } function testeur(obj,o){ alert(obj.text()); alert(o.param); // renvoi systématiquement "instance 2" (???) } }; $.fn.test.defaults = { param : '', callback : function(){} }; })(jQuery); /* /PLUGINNAME */ $(function(){ $('.test').test(); });
et la structure HTML :
Code:

1 2 3 4 5 6 7 <div id="instance1" class="test"> instance 1 </div> <div id="instance2" class="test"> instance 2 </div>
Le problème est qu'au moment du second alert, je ne reçoit que "instance 2".
...alors que je veux désespérément avoir "instance 1" pour le premier et "instance 2" pour le second.

Quelqu'un pourrait éclairer ma lanterne ?
Plus j'y pense et plus je me dis que je m'y prend mal... mais ma matière grise frise... ^^'

Un grand merci d'avance parce que je sèche vraiment là... ^^

[Monkey Monk]
That's all folks !

04/08/2010, 16h00
SpaceFrog

rattache la variable à this ou a window ...
04/08/2010, 16h51
monkey_monk
Bonjour et merci pour la réponse rapide !

Donc si je comprend bien tu me suggères de faire comme ceci ? :
Code:

1 2 3 4 5 6 7 return this.each(function(){ $(this).o = $.meta ? $.extend({}, opts, obj.data()) : opts; init($(this)); opts.callback(); });
Je n'ai pas l'occasion d'essayer tout de suite mais je profite de 3min pour grappiller des infos ! ^^

Merci ! ;)

'ai fini ! :)

Ok... alors ma solution est d'un bête... comment n'y ai-je pas pensé avant ?

L'utilisation de .data() permet d'ajouter mes params à mon objet jQuery courant.

Donc :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 return this.each(function(){ $(this).data(opts); init($(this)); opts.callback(); }); function init(obj){ obj.data(opts).param = obj.text(); obj.append('<span class="testeur">click test</span>'); obj.children('.testeur').click(function(e){ e.preventDefault(); testeur(obj); }); } function testeur(obj,o){ alert(obj.text()); alert(obj.data(opts).param); }
Et merci SpaceFrog ! C'est toi qui m'a remis les idées en place ! ;)

Bonjour

Citation:

Envoyé par monkey_monk

Plus j'y pense et plus je me dis que je m'y prend mal... mais ma matière grise frise... ^^'

Si je me base sur le code fourni dans votre message, le stockage de paramètres n'est pas indispensable :

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
<script>
	(function($){
		$.fn.test = function(options){
			var opts = $.extend({},$.fn.test.defaults,options);
 
			return this.each(function(i, item){
				var str = $.trim($(item).text());
 
				$("<a\>",{
					'class': "testeur",
					href: "#",
					title: "click test",
					html: "click test",
					click: function(e){
						e.preventDefault();
						testeur(item, str);
					}
				}).appendTo(item);
 
				opts.callback();
			});
		};
 
		// param 1 : element du DOM
		// param 2 : texte
		function testeur(elem, texte){
			var str = "elem = " + elem +
					"\n\n$(elem).text() = " + $.trim($(elem).text()) +
					"\n\ntexte = " + texte;
 
			alert(str);
		}
 
		$.fn.test.defaults = {
			callback: function(){}
		};
	})(jQuery);
 
	$(function(){
		$('.test').test();
	});
</script>

Si toutefois le stockage de paramètres est indispensable pour d'autres usages :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
$("<a\>",{
	'class': "testeur",
	href: "#",
	title: "click test",
	html: "click test",
	click: function(e){
		e.preventDefault();
		testeur(item, str);
	}
}).data('test', {
	parent: item,
	texte: str
}).appendTo(item);

10/08/2010, 13h10
monkey_monk

Merci beaucoup pour ce complément d'info !
Je ne connaissais pas non plus cette utilisation des attributs jQuery.

Merci ! :)
10/08/2010, 21h31
danielhagnoul

Bonsoir

Citation:

Envoyé par monkey_monk

Merci beaucoup pour ce complément d'info !
Je ne connaissais pas non plus cette utilisation des attributs jQuery.

Merci ! :)

Voir : Comment puis-je créer un nouvel élément du DOM ?
12/08/2010, 15h20
monkey_monk

Citation:

Voir : Comment puis-je créer un nouvel élément du DOM ?

Ohhh ! Génial, encore merci !

Un nouveau trou noir dans mon emploi du temps ! :) :D