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") {

我尝试将select中的名称设为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]);

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

得到了吗？

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

2 个答案: