Question

我的JavaScript文件中有10个颜色样式数组。我需要检查下拉列表中当前选定的值是否等于我创建的数组名称之一，并在更改后分配数组。

以下是两个阵列：

var red = {
    primary_color: 'red',
    primary_hover_color: 'black',
    menu_color: '#9c9fa3'
}

var yellow = {
    primary_color: '#22c39b',
    primary_hover_color: '#187e65',
    menu_color: '#9c9fa3'
}

然后我也有这个用于下拉列表：

$('#color_palette').change(function() {
    var palette = $(this).val();

    if (palette = 'red') { palette = red }
    if (palette = 'yellow') { palette = yellow }
    // etc etc
});

我想知道是否有这样的速记版本而不是必须检查每个值的if条件并使其更“动态”而不是硬编码条件中的每个颜色值。

Answer 1

您可以将颜色放在单个对象中

var colors = {
red: {
  primary_color: 'red',
  primary_hover_color: 'black',
  menu_color: '#9c9fa3'
},

yellow: {
  primary_color: '#22c39b',
  primary_hover_color: '#187e65',
  menu_color: '#9c9fa3'
}
}

然后将支票更改为

$('#color_palette').change(function() {
    var palette = colors[$(this).val()];
});

Answer 2

您可以安排调色板：

var palettes = {
   red: red,
   yellow: yellow
};

然后像这样访问它们

var palette = palettes[palette];

Answer 3

首先，让我们解决您发布的代码中的问题;

你拥有的不是数组，它是通过对象文字语法声明的对象。
if (palette = 'red')将palette设为"red";它没有做任何比较;那是==和===。你应该拥有的是：
```
if (palette === "red")
```

在您的更改处理程序中，您将覆盖变量palette，其中包含用户使用每个if块的内容选择的值。

$('#color_palette').change(function() {
    var palette = $(this).val(); // <-- set here

    if (palette = 'red') { palette = red  // <--- overwritten here}
    if (palette = 'yellow' /* well, and here, but we fixed that in #2 */) { palette = yellow }
    // etc etc
});

您应该注意的是在母对象中包含所有颜色样式;

var styles = {
    red: {
        primary_color: 'red',
        primary_hover_color: 'black',
        menu_color: '#9c9fa3'
    },
    yellow: {
        primary_color: '#22c39b',
        primary_hover_color: '#187e65',
        menu_color: '#9c9fa3'
    }
};

然后你在改变功能中可以做的只是：

$('#color_palette').change(function() {
    palette = styles[$(this).val()];
});

Answer 4

我会有一个调色板的对象：

palettes = {
    red: {
        primary_color: 'red',
        /* etc. */
    }, 
    yellow: {
         primary_color: 'yellow',
        /* etc. */
    }
}

然后，您可以轻松选择它：

var selectedPalette = palettes[$(this).val()];

javascript数组条件的速记版本

4 个答案: