javascript - JS/jQuery を使用してより適切な if ステートメントを作成するのに助けが必要です

Question

これを書くより良い方法はありますか？if ステートメントを何らかの方法で組み合わせることができるようです。

ここにHTMLがあります

<header class="gray_bg" id="main_header">

このヘッダータグのクラス名を変更するために、このコードを書きました。それはうまく機能しますが、もっと短くてもいいような気がします。私はまだ JS/jQuery を学んでいるので、何か助けていただければ幸いです。ありがとう！

$("nav#main_nav li a").on('click', function(){
    var link = $("nav#main_nav li a").index(this);
    var banner = $("header#main_header");

    if (link === 0) {
        banner.attr('class', "gray_bg");
    }

    if (link === 1) {
        banner.attr('class', "orange_bg");
    }

    if (link === 2) {
        banner.attr('class', "green_bg");
    }

    if (link === 3) {
        banner.attr('class', "purple_bg");
    }
});

Answer 1

$("nav#main_nav li a").on('click', function(){
    var link = $("nav#main_nav li a").index(this);
    var colors = ["gray_bg", "orange_bg", "green_bg", "purple_bg"];

    $("header#main_header").attr('class', colors[link]);
});

Answer 2

クラスを配列に入れて、取得したインデックスで読み取るだけです

var classes = ["gray_bg" ,"orange_bg","green_bg" ,"purple_bg"];
$("nav#main_nav li a").on('click', function(){
    var link = $("nav#main_nav li a").index(this);
    var banner = $("header#main_header");


    banner.attr('class', classes[link]);

});