Attacher une variable à un élément HTML

Bonjour à tous,

je continue sur ma lancée des plugins JQuery (que je réalise pour mes besoins) et je souhaitais utiliser les même principes que le flexigrid pour accéder à des méthodes mais je me heurte à un problème.

J'ai une fonction JQuery "filters" qui créer un div et fait ce qu'il à faire dedans.
Et j'ai 2 autres fonctions qui permettent en théorie de mettre à jour les options de mon "filters" et de le recharger (recharger l'IHM de ce div).

Sauf que lorsque j'essaye d'accéder à la variable params de mon élément HTML, elle n'existe pas, pourtant en débug, lorsque je fais "this.params = params;" dans la partie "filters", je vois bien que la variable params est attachée à mon élément HTML.

Ma question est donc : wtf ? Pourquoi je n'arrive pas à récupérer cette variable en faisant "this.params" dans les fonctions "filtersOptions" et/ou "filtersReload" ?

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

(function($) { /*JQUERY PLUGGIN*/ $.fn.filters = function(params) { /*Parameters*/ params = $.extend({ title: '', category: '', filters: [], open: true },params);   /*No action so we init the container*/ if((typeof params)!="string"){ /*Change the container class*/ $(this).addClass("activeFilters"); /*Create the title*/ $(this).append(CreateDivTitle(params)); /*Create the content*/ $(this).append(CreateDivContent(params)); }else{ //Action asked   } this.params = params; return this; }; $.fn.filtersOptions = function (params) { //function to update general options return this.each(function () { $.extend(this.params, params); }); }; $.fn.filtersReload = function (params) { //function to update content return this.each(function () { $.extend(this.params, params); $("#activeFiltersContent").remove(); /*Re create the content*/ $(this).append(CreateDivContent(this.params)); }); }; })(jQuery);

---

Code:

---

1 2 3

$('#activeFilters').filters({title: filtersTitle[0], category: filterAll[0], open: true}); var arrayTest = ['Severité 1','Site : Tours']; $('#activeFilters').filtersOptions({filters: arrayTest});

---

NB : le code est toujours en développement. Les fonctions Create[...] ne font qu'insérer du HTML.

Merci à tous et joyeux noël en léger retard puisque je n'ai pas eu l'occasion de vous le souhaiter :mouarf:

Bonsoir

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

(function($) { $.fn.filters = function(params){   // modifie $.fn.filters.params avec params $.extend($.fn.filters.params, params);   return this; };   $.fn.filtersOptions = function(params){ // modifie $.fn.filters.params avec params $.extend($.fn.filters.params, params);   return this; };   $.fn.filtersReload = function(params) {   return this.each(function(){ // modifie $.fn.filters.params avec params $.extend($.fn.filters.params, params);   $(this).append( CreateDivContent($.fn.filters.params) ); }); };   // la version par défaut $.fn.filters.params = { "title": '', "category": '', "filters": [], "open": true }; })(jQuery);

---

Mais est ce que cela fait que params est lié au composant auquel j'applique mon pluggin "filters" ? J'en ai pas l'impression.
Parce que si j'ai plusieurs appels à mon pluggin dans la même pages, tous mes composants vont partager les mêmes options ?

Citation:

---

Envoyé par titmael

[...], tous mes composants vont partager les mêmes options ?

---

Oui ! :aie:

Comment faire alors pour que "params" ne soit lié qu'à l'élement HTML auquel j'applique mon pluggin ?

data() ...

J'ai bien essayé de mettre un

Code:

---

$(this).data('params',params);

---

à la place de

Code:

---

this.params = params;

---

Mais ça ne change rien ... je vois pas si je m'y prend mal ou non :aie:

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

(function($) { $.fn.filters = function(params){   return this.each(function(i, item){ // $.fn.filters.params n'est plus modifié par params var opts = $.extend(true, {}, $.fn.filters.params, params);   $(item).data("params", opts); }); };   $.fn.filtersOptions = function(params){   return this.each(function(i, item){ var opts = $(item).data("params");   // on modifie les options existantes $.extend(opts, params);   // on sauvegarde les modifications $(item).data("params", opts); }); };   $.fn.filtersReload = function() {   return this.each(function(i, item){ $(item).append( CreateDivContent( $(item).data("params") ) ); }); };   // la version par défaut $.fn.filters.params = { "title": '', "category": '', "filters": [], "open": true }; })(jQuery);

---