javascript - 从对象内的 JavaScript 数组中获取第一个值

Question

CLICK FOR DEMO

在下面的示例中，我无法使用 pick[0] 来检索正确的值。

如果 pick[0] 使用对象值之一进行硬编码，例如 A[0]，则代码将按预期工作。

问题

如何根据所选数组从 javascript 对象中检索第一个数组值？

JQUERY

var pick = $( "#select option:selected" ).text(),
    myArray = {
      A: ['#004d94', '#0073b9'],
      B: ['#f6f0c1', '#b9cdaf']
    };

$(function () {
    $('.Bx').css('background', myArray.pick[0]);
    $('.Tx').text(pick);
});

Answer 1

您需要在更改处理程序中选择值:

myArray[this.value][0]

片段:

var myArray = {
      A: ['#004d94', '#0073b9'],
      B: ['#f6f0c1', '#b9cdaf']
    };


$('#select').change(function () {
    $('.Bx').css('background', myArray[this.value][0]);
    $('.Tx').text(this.value + " = " + myArray[this.value][0]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select">
  <option value="A">A</option>
  <option value="B">B</option>
</select>

<div class="Bx">COLOUR CHANGE</div>
SELECTED: <div class="Tx"></div>

<小时/>

根据评论，如果您需要在页面加载时预填充..只需确保选择了第一个选项，然后选择它。

类似这样的:

var myArray = {
      A: ['#004d94', '#0073b9'],
      B: ['#f6f0c1', '#b9cdaf']
    };


goChange($("#select")[0].value);

$('#select').change(function () {
    goChange(this.value);
});

function goChange(val) {
    $('.Bx').css('background', myArray[val][0]);
    $('.Tx').text(val);  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select">
  <option value="A" selected>A</option>
  <option value="B">B</option>
</select>

<div class="Bx">COLOUR CHANGE</div>
SELECTED: <div class="Tx"></div>