JavaScript數組條件的速記版本

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

我在想，如果有這樣的簡寫版本，而不必來檢查如果條件爲每個值並使其更加「動態」而不是硬編碼條件中的每個顏色值。

來源

2012-11-12 mousesports

請，先學習JavaScript。那些不是數組。如果沒有布爾條件，但分配。 – Serabe

[將字符串轉換爲Javascript中的變量名稱]（http：// stackoverflow。COM /問題/ 5613834 /轉換字符串到變量名，在JavaScript的） – sachleen

我學習它，因此我的問題......而不是他們的數組對象？ – mousesports

你可以把你的顏色在一個單一的對象

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

來源

2012-11-12 21:01:45 lostsource

你可以安排你的調色板：

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

，然後訪問他們像這樣

var palette = palettes[palette];

來源

2012-11-12 21:01:17

首先，讓我們解決您張貼在代碼中的問題;

你有什麼不是一個數組，它是一個通過對象字面值語法聲明的對象。
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()]; 
});

來源

2012-11-12 21:01:34 Matt

感謝您的解釋馬特。 – mousesports

我會有一個對象調色板：

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

然後，你可以很容易地選擇它：

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

來源

2012-11-12 21:02:40 Brad

JavaScript數組條件的速記版本

回答

相關問題