CODEWITHSUNDEEP
javascriptjqueryarraysstring
Bernie Davies
Bernie Davies

Reputation: 419

Pass array name as string, jquery

Please excuse my ignorance on this. I have the code doing what I need, but, I know there is a more elegant solution. It simply evades me and my hours of tinkering and googling.

I have a select box. When the selection changes I get the value and make some changes to some elements. The selected value is an array name - but I do not know how to take $(this).val() and use it to access the matching array, which has forced me to do everything longhand.

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

I've tried having the names in the select as black[], vanilla[] and tried accessing via $(this).val()[] and all sorts of different ways.

What I would like to do is something like this:

      $('#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]);

Thanks for any pointers

Upvotes: 1

Views: 413

Answers (2)

john Smith
john Smith

Reputation: 17906

i would do prefer sth. like this 

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

using .val() on a span element wont work, use .text() or .html() but when you use .html() as string

heres a fiddle http://jsfiddle.net/LAbCv/14/

but i see what you more like to do is sth like using objects 

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


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

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

to understnad and give it more readable code :

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

got it ?

Upvotes: 1

hsz
hsz

Reputation: 152216

The best way to handle array using its name is to put them into a dictionary:

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

Usage:

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

Upvotes: 1

Related Questions