2012-11-12 44 views
1

我在JavaScript文件中有10个颜色样式数组。我需要的是检查下拉列表中当前选定的值是否与我创建的数组名称之一相等,并在更改后指定数组。JavaScript数组条件的速记版本

这里是阵列2:

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

我在想,如果有这样的简写版本,而不必来检查如果条件为每个值并使其更加“动态”而不是硬编码条件中的每个颜色值。

+3

请,先学习JavaScript。那些不是数组。如果没有布尔条件,但分配。 – Serabe

+0

[将字符串转换为Javascript中的变量名称](http:// stackoverflow。COM /问题/ 5613834 /转换字符串到变量名,在JavaScript的) – sachleen

+0

我学习它,因此我的问题......而不是他们的数组对象? – mousesports

回答

2

你可以把你的颜色在一个单一的对象

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()]; 
}); 
1

你可以安排你的调色板:

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

,然后访问他们像这样

var palette = palettes[palette]; 
1

首先,让我们解决您张贴在代码中的问题;

  1. 你有什么不是一个数组,它是一个通过对象字面值语法声明的对象。
  2. if (palette = 'red')设置为palette"red";它没有做任何比较;那就是=====。你应该是:

    if (palette === "red") 
    
  3. 在您更改处理你覆盖你的变量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()]; 
}); 
+0

感谢您的解释马特。 – mousesports

0

我会有一个对象调色板:

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

然后,你可以很容易地选择它:

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