JavaScript/JQuery: utilise $ (this) dans un nom de variable

Question

J'écris un jquery-plugin, qui modifie une valeur css de certains éléments sur certaines actions utilisateur. Pour les autres actions, la valeur css doit être réinitialisée à sa valeur initiale.

Comme je n'ai trouvé aucun moyen de récupérer les valeurs css initiales, je viens de créer un tableau qui stocke toutes les valeurs initiales au début.

Je l'ai fait avec:

var initialCSSValue = new Array() 

tout à fait au début de mon plugin et plus tard, dans une sorte de boucle de configuration où tous mes éléments me accédé je

initialCSSValue[$(this)] = parseInt($(this).css('<CSS-attribute>')); 

Cela fonctionne très bien dans Firefox. Cependant, je viens de découvrir que IE (même v8) a des problèmes avec l'accès à la certaine valeur à nouveau en utilisant un autre

initialCSSValue[$(this)] 

dans le code. Je pense que cela est dû au fait que j'utilise un objet ($ (this)) comme nom de variable.

Y a-t-il un moyen de contourner ce problème?

Merci

Answer 1

Utilisez $(this).data()

Au début, j'allais dire en utilisant une combinaison de l'ID et le nom d'attribut, mais chaque objet peut ne pas avoir une pièce d'identité. Au lieu de cela, utilisez les fonctions jQuery Data pour attacher l'information directement à l'élément pour un accès facile et unique.

quelque chose comme ça (Où <CSS-attribute> est remplacé par le nom d'attribut css):

$(this).data('initial-<CSS-attribute>', parseInt($(this).css('<CSS-attribute>'))); 

Ensuite, vous pouvez y accéder à nouveau comme ceci:

$(this).data('initial-<CSS-attribute>'); 

manière alternative à l'aide data:

Dans votre plugin, vous pourriez faire une petite fonction d'aide comme ceci, si y ous voulait éviter une trop grande utilisation data:

var saveCSS = function (el, css_attribute) { 
    var data = $(el).data('initial-css'); 
    if(!data) data = {}; 
    data[css_attribute] = $(el).css(css_attribute); 
    $(el).data('initial-css', data); 
} 
var readCSS = function (el, css_attribute) { 
    var data = $(el).data('initial-css'); 
    if(data && data[css_attribute]) 
    return data[css_attribute]; 
    else 
    return ""; 
} 

Answer 2

L'indexation d'un tableau avec un objet jQuery semble louche. J'utiliserais l'identifiant de l'objet pour entrer le tableau.

initialCSSValue[$(this).attr("id")] = parseInt... 

Answer 3

Oh s'il vous plaît, ne fais pas ça ... :)

Écrivez quelques CSS et utiliser le addClass et removeClass - il laisse les styles intacts après.

Answer 4

si quelqu'un veut voir le plugin en action, voir ici: http://www.sj-wien.at/leopoldstadt/zeug/marcel/slidlabel/jsproblem.html