將數組名稱作爲字符串傳遞，jquery

請原諒我對此的無知。我有代碼做我需要的，但是，我知道有一個更優雅的解決方案。它只是迴避我和我的時間修補和谷歌搜索。將數組名稱作爲字符串傳遞，jquery

我有一個選擇框。當選擇發生變化時，我得到該值並對某些元素進行一些更改。選定的值是一個數組名稱 - 但我不知道如何獲取$（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") {

我試過有在選擇名稱爲黑色[]，香草[]，並試圖通過$訪問（這）.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]);

感謝任何指針

來源

2014-02-09 Bernie Davies

使用其名稱是將它們放到一個字典來處理數組的最佳方式：

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

用法：

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

來源

2014-02-09 20:39:32 hsz

我會更喜歡某事。這樣

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

使用.VAL（）在span元素無法正常工作，使用的.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]});

到understnad並給它更可讀的代碼：

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

明白了嗎？

來源

2014-02-09 20:44:54

感謝您的回覆，我一直無法爲我工作。我會再試一次。可能是我的胖手指和語法。 –

將數組名稱作爲字符串傳遞，jquery

回答

相關問題