Using "dynamic variables" within a function

Question

I am not sure on how to solve this problem in JavaScript, so I tought about "dynamic variables". If there is any better way to do it, please let me know!

Given is a function with one parameter (left or right):

var footerMenuLeftOpen = true;
var footerMenuRightOpen = true;

function footerMenu(menuName, className) {

  if (menuName) {
    $('.content-' + className).animate({
      height: "+=28px",
    }, {
      duration: 100
    });
    return false;
  } else {
    $('.content-' + className).animate({
      height: "-=28px",
    }, {
      duration: 100
    });
    return true;
  }
}


$(".content-left").click(function() {
  footerMenuLeftOpen = footerMenu(footerMenuLeftOpen, 'left');
});
$(".content-right").click(function () {
    footerMenuRightOpen = footerMenu(footerMenuRightOpen, 'right');
});

.content-left {
  width: 200px;
  height: 100px;
  background-color: red;
  display: inline-block;
}

.content-right {
  width: 200px;
  height: 100px;
  background-color: blue;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content-left">

</div>

<div class="content-right">

</div>

Now I want to add code, that the change in the height (+/- 28px) depends on the height of the red or blue box. Therefore I want to check for the starting height of the boxes as soon the boxes are displayed.

For example:

if ($('.content-left').height() > 42) {
    LeftHeight: "+=28px",
} else if ($('.footer-button-box.left').height() > 28) {
    LeftHeight: "+=14px",
} else {
    LeftHeight: "+=5px",
}

But how do I now change the height-value of the function "footerMenu" so that the height changes regarding to the determined values from the if-function?

I tought about something like

$('.content-' + className).animate({
      height: className+Height,
    }, {
      duration: 100
    });

... where className would be "left" plus the term "Height"; so leftHeight.

I guess there is a way better solution to make that work only one elegant function?

Thanks in advance!

EDIT: Since my question is hard to understand, in simple words:

I have variables "leftHeight" and "rightHeight". Now: how can I access these variables from a function where left/right is the value of the parameter?

Goal: height: leftHeight

Idea: height: className+"Height"

... so how to use the value of the parameter of the function as a part of a variable name?

if is not a function and doesn't return anything. Use ternary operators, and place them in the location of the property value. — Bergi
– Bergi, Commented May 30, 2017 at 13:01
Not sure what you are trying to do here, but if you want, you can take a look at flexbox, which I think might suffice your requirements.. without jS — Mr. Alien
– Mr. Alien, Commented May 30, 2017 at 13:01

Clms · Accepted Answer · 2017-05-30 15:07:02Z

1

I found the solution myself: I had to use objects.

var footerMenuHeight = new Object();

if ($(".content-left").height() > 40) {
  footerMenuHeight.left = 200;
} else if ($(".content-left").height() > 30) {
  footerMenuHeight.left = 18;
} else {
  footerMenuHeight.left = 8;
}

So I was able to use the parameter to access the value of this object:

footerMenuHeight[className]

answered May 30, 2017 at 15:07

Clms

7251 gold badge7 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jordan Running Over a year ago

In JavaScript it's idiomatic to use {} instead of new Object().

Collectives™ on Stack Overflow

Using "dynamic variables" within a function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related