将数组名称作为字符串传递，jquery答案

【问题标题】：Pass array name as string, jquery将数组名称作为字符串传递，jquery
【发布时间】：2023-04-02 15:06:01
【问题描述】：

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

我有一个选择框。 When the selection changes I get the value and make some changes to some elements.选定的值是一个数组名称 - 但我不知道如何获取 $(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]);

感谢大家的指点

【问题讨论】：

标签： javascript jquery arrays string

【解决方案1】：

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

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

用法：

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

【讨论】：

【解决方案2】：

我会更喜欢某事。像这样

<select id="theme">
    <option data-color-one="c9311b" data-color-two="eaeaea" value="cherry">Cherry</option>
    <option data-color-one="000000" data-color-two="cccccc" value="black">Black</option>
</select>




$("#theme").change(function() {
    $('#hiColorTxt').text($( "#theme option:selected" ).attr('data-color-one'));
    $('#loColorTxt').text($( "#theme option:selected" ).attr('data-color-two'));
});

在 span 元素上使用 .val() 不起作用，使用 .text() 或 .html() 但是当你使用 .html() 作为字符串时

这是一个小提琴http://jsfiddle.net/LAbCv/14/

但我看到你更喜欢做的就是使用对象

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


$("#theme").change(function() {

    customColors = colors[$(this).val()];
    $('#firstColor').css({'background-color':'#'+customColors[0]});

了解并提供更易读的代码：

var colors = {
    vanilla:{
       first: "c9311b",
       second: "ffffff" 
    },
    black:{
       first: "C5C4C1",
       second: "000000"
    }
};

$("#theme").change(function() {

    customColors = colors[$(this).val()];
    $('#firstColor').css({'background-color':'#'+customColors.first});

知道了吗？

【讨论】：

感谢您的回复，我还无法让它为我工作。我会再试一次。可能是我的胖手指和语法。