CODEWITHSUNDEEP
javascriptvariables
lupos
lupos

Reputation: 374

Dynamic variable names in JavaScript

EDIT: Never mind. Figured out the issue. Just made height an array and name each id. Der. thanks anyway.

I've searched and not turned up much on this. I've got a simple script that just animates a drop down menu sliding out when hovered over. The issue is if I quickly move back and forth between two or more of the menu items the height variable I set at the begin of each hover can be overwritten. I've got a work around that fixes it after moving off and then back on again by resetting the height to auto when it's off screen but I wont to prevent it from happening at all. Usually I would make a dynamic avariable in other languages I've worked in like:

$height = $(this).attr("id")+"height";

alert($$height);

//which would theoretically alert the height of whatever triggered it.

Is there a way to do this in jQuery so each element that calls the function has it's own height variable?

EDIT2: Since there is interest I'll paste the whole thing.

   $("#NavMenu > li").hover(
           function () {
               var height = {};
               height[$(this).attr("id")] = $(this).find("ul").css("height");
               $(this).find("ul").css("height", "0px");
               $(this).find("ul").css("left", "auto");
               $(this).find("ul").animate({ height: height[$(this).attr("id")] }, 300)
           },
            function () {
                $(this).find("ul").css("left", "-999em");
                $(this).find("ul").css(height, height[$(this).attr("id")])
            }
        )

Upvotes: 0

Views: 610

Answers (2)

user492203
user492203

Reputation:

Yes, you can do that:

$('.obj').get(0).key = 'value';

or

$('.obj').get(0)['key'] = 'value'

Though it's better to use .data():

$('.obj').data('key', 'value');

Tips

1. You can chain multiple calls, like this:

$('.obj').css('color', 'red').data('key', 'value');

2. You can pass an object to .css():

$('.obj').css({
    'width': 100,
    'height': 100
});

3. If you don't change other CSS properties, you can use .width()and .height() to set and get an element's width:

HTML

<div id='box'></div>

CSS

#box {
    width: 200px;
    height: 100px;
}

JavaScript

var $box = $('#box');
// 200x100
alert( $box.width() + 'x' + $box.height() );

4. You may have noticed in the previous example that I saved a reference to $('#box') in a variable. There are some cases when you can't use chaining, like this:

var $box = $('#box');
setTimeout(function() {
    $box.animate({ 'width': 100 }, 100);
}, 1000);
setTimeout(function() {
    $box.animate({ 'height': 200 }, 100);
}, 1000);

If you have to do that, always save a reference to the element – that's called caching. Otherwise jQuery would have to search for it multiple times.

Upvotes: 1

Naftali
Naftali

Reputation: 146310

Im not sure why you are making your own methods for sliding in and out.

you can use jquery's hide() and show() methods (or even toggle) with an animation inside the parenthesis of the method

Upvotes: 0

Related Questions