如何通过构建字符串来动态访问变量[重复]答案

【问题标题】：How to access variables dynamically by building a string [duplicate]如何通过构建字符串来动态访问变量[重复]
【发布时间】：2014-05-08 19:55:40
【问题描述】：

希望实现这样的目标：

number = "first";
number2 = "second";

var firstColor = "red";
var secondColor = "blue";

//Changes background to red:
div.style.backgroundColor = number+"Color";

//Changes background to blue:
div.style.backgroundColor = number2+"Color";

当我尝试这个时，它对我不起作用，并且没有应用样式。我怎样才能动态地做到这一点。

编辑：

我有一系列 else ifs 来根据选择的团队选择字体文本。我想创建这样的变量：

 liverpoolColor = "red";

else if(team == "liverpool"){
        for (var x = 0; x < areas.length; x++){
//Then change the color dynamically like this:

            areas[x].style.color = team+"Color";
            }

        }

这样我可以完全删除 else if 并清理我的代码：

【问题讨论】：

您是否在控制台中遇到任何错误？您确定 div 是 HTML 元素吗？
上面的代码只是我想要做的一个参考。查看编辑，查看我的实际代码
我不知道为什么人们拒绝投票。他们非常有帮助，我会投票。 eval 函数运行良好。
Kyle 和我给了你答案，不需要 eval 也能做同样的事情（又名：邪恶）
@AnonOmus 几乎没有任何情况下eval 是正确的选择。答案之所以被否决，是因为它们提倡将不良做法作为解决问题的快速解决方案。您的问题被否决了，因为这是一个常见问题，已在 StackOverflow 上解决了无数次，包括我在上面链接到的问题。

标签： javascript variables

【解决方案1】：

使用这样的对象：

var colors = {
    firstColor: "red",
    secondColor: "blue"
};

div.style.backgroundColor = colors[number+"Color"];

【讨论】：

不知道为什么它被降级了...它的答案基本上与此相同：stackoverflow.com/questions/5187530/… 并且它不使用 eval...请不要使用 eval。

【解决方案2】：

用户 eval 方法如下：

//Changes background to red:
div.style.backgroundColor = eval(number+"Color");

//Changes background to blue:
div.style.backgroundColor = eval(number2+"Color");

【讨论】：

【解决方案3】：

你需要这样的东西吗？

$('div').css('background-color', firstColor);

编辑

那么你需要这个：

var colors = {
    'first' = 'red',
    'second' = 'blue'
}

var myColor = colors['first'];

【讨论】：

OP 没有在任何地方提到 JQuery。如果他没有加载 JQuery，这将不起作用。

【解决方案4】：

试试这样的：

var colors = {
    "liverpool":"red",
    "barcelona":"green"
};

// Assume you have team = "liverpool"
div.style.backgroundColor = colors[team];

因此，取决于团队，颜色将被应用。

【讨论】：

【解决方案5】：

JavaScript eval() 函数可以帮助解决这个问题...

//Changes background to red:
div.style.backgroundColor = eval(number+"Color");

【讨论】：