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

});

需要帮助用JS / jQuery编写更好的if语句

2 个答案: