需要帮助，用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]);

});