javascript - 将数组名称作为字符串传递，jquery

Question

请原谅我对这方面的无知。我有代码做我需要的，但是，我知道有一个更优雅的解决方案。它只是逃避了我和我修补和谷歌搜索的时间。

我有一个选择框。当选择发生变化时，我得到值并对某些元素进行一些更改。所选值是一个数组名称 - 但我不知道如何获取 $(this).val() 并使用它来访问匹配的数组，这迫使我必须手写所有内容。

<select id="theme">
<option value="cherry">Cherry</option>
<option value="black">Black</option>
<option value="blueberry">Blueberry</option>
<option value="vanilla">Vanilla</option>
</select>

<div id="bgColorTxt">
<span id="hiColorTxt">TEXT</span><span id="loColorTxt">TEXT</span>
</div>

......

$("#theme").change(function() {
var black = [ "000000", "C9C8C9", "3D3A3E" ];
var vanilla = [ "C5C4C1", "ffffff", "9A9998" ];

etc...

 if ($(this).val() === "vanilla") {
          $('#bgColor').val(vanilla[0]);$('#hiColor').val(vanilla[1]);$('#loColor').val(vanilla[2]);
    $('#bgColorTxt,#hiColorTxt,#loColorTxt').css('background-color','#'+vanilla[0]);
    $('#hiColorTxt').css('color','#'+vanilla[1]);
    $('#loColorTxt').css('color','#'+vanilla[2]);
} else if ($(this).val() === "black") { 

我试过将选择中的名称设置为 black[]、vanilla[] 并尝试通过 $(this).val()[] 和各种不同的方式进行访问。

我想做的是这样的:

      $('#bgColor').val(arrayname[0]);$('#hiColor').val(arrayname[1]);$('#loColor').val(arrayname[2]);
$('#bgColorTxt,#hiColorTxt,#loColorTxt').css('background-color','#'+arrayname[0]);
$('#hiColorTxt').css('color','#'+arrayname[1]);
$('#loColorTxt').css('color','#'+arrayname[2]);

感谢指点

Answer 1

使用名称处理数组的最佳方法是将它们放入字典中:

var colors = {
  black:   [ "000000", "C9C8C9", "3D3A3E" ],
  vanilla: [ "C5C4C1", "ffffff", "9A9998" ]
};

用法:

var name = $(this).val(); // 'vanilla'
$('#bgColor').val(colors[name][0]);