Portée variables, objets dans jQuery

**monkey_monk** · 04/08/2010, 16h44

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 :

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
 
/* 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 :

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

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 !

**SpaceFrog** · 04/08/2010, 17h00

rattache la variable à this ou a window ...

**monkey_monk** · 04/08/2010, 17h51

Bonjour et merci pour la réponse rapide !

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

Code :

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

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 !

**monkey_monk** · 05/08/2010, 00h51

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 :

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

**danielhagnoul** · 05/08/2010, 12h55

Bonjour

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 :

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

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

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