JavaScript/JQuery: use $(this) in a variable-name

Question

Hi!

I'm writing a jquery-plugin, that changes a css-value of certain elements on certain user-actions. On other actions the css-value should be reseted to their initial value.

As I found no way to get the initial css-values back, I just created an array that stores all initial values in the beginning.

I did this with:

var initialCSSValue = new Array()

quite in the beginning of my plugin and later, in some kind of setup-loop where all my elements get accessed I used

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

This works very fine in Firefox. However, I just found out, that IE (even v8) has problems with accessing the certain value again using

initialCSSValue[$(this)]

somewhere else in the code. I think this is due to the fact, that I use an object ($(this)) as a variable-name.

Is there a way arround this problem?

Thank you

Answer 1

Indexing an array with a jQuery object seems fishy. I'd use the ID of the object to key the array.

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

Answer 2

What about using

initialCSSValue[$(this).attr('id')];

This would assume you are correctly using each id only once.

Answer 3

Use $(this).data()

At first I was going to suggest using a combination of the ID and the attribute name, but every object might not have an ID. Instead, use the jQuery Data functions to attach the information directly to the element for easy, unique, access.

Do something like this (Where <CSS-attribute> is replaced with the css attribute name):

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

Then you can access it again like this:

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

Alternate way using data:

In your plugin, you could make a little helper function like this, if you wanted to avoid too much data usage:

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 4

Oh please, don't do that... :)

Write some CSS and use the addClass and removeClass - it leaves the styles untouched afterwards.

Answer 5

if anybody wants to see the plugin in action, see it here: http://www.sj-wien.at/leopoldstadt/zeug/marcel/slidlabel/jsproblem.html