javascript - 在函数中使用 "dynamic variables"

Question

我不确定如何在 JavaScript 中解决这个问题，所以我考虑了“动态变量”。如果有更好的方法，请告诉我!

给出的是一个带有一个参数(左或右)的函数:

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>

现在我想添加代码，高度的变化(+/- 28px)取决于红色或蓝色框的高度。因此，我想在显示框后立即检查框的起始高度。

例如:

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

但是我现在如何更改函数“footerMenu”的高度值，以便高度根据 if 函数确定的值而变化？

我对类似的事情感到担忧

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

...其中 className 为“left”加上术语“Height”；所以留下高度。

我想有一种更好的解决方案可以使其仅适用于一个优雅的功能？

提前致谢!

编辑:由于我的问题很难理解，简单来说:

我有变量“leftHeight”和“rightHeight”。现在:如何从左/右为参数值的函数访问这些变量？

目标:高度:leftHeight

想法:高度:类名+“高度”

...那么如何使用函数参数的值作为变量名的一部分呢？

Answer 1

我自己找到了解决方案:我必须使用对象。

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;
}

因此我能够使用参数来访问该对象的值:

footerMenuHeight[className]