1

JavaScriptファイルに10個のカラースタイルの配列があります。ドロップダウンリストで現在選択されている値が、作成した配列名の1つと等しいかどうかを確認し、変更したら配列を割り当てる必要があります。

アレイの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
});

各値のif条件をチェックして、条件の各色の値をハードコーディングするのではなく、これをより「動的」にする代わりに、これの短縮バージョンがあるかどうか疑問に思いました。

4

4 に答える 4

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()];
});
于 2012-11-12T21:01:45.027 に答える
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()];
});
于 2012-11-12T21:01:34.313 に答える
1

パレットを配置できます。

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

そして、そのようにアクセスします

var palette = palettes[palette];
于 2012-11-12T21:01:17.763 に答える
0

私はパレットのオブジェクトを持っているでしょう：

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

次に、それを簡単に選択できます。

var selectedPalette = palettes[$(this).val()];
于 2012-11-12T21:02:40.833 に答える