Question

如何缩短以下代码？我正处于js旅程的中间。请忽略本介绍文本的其余部分，只需要几句话就可以使我的帖子更长，因为stackoverflow唠叨我的解释和我的代码有多少。只是忽略并弄清楚代码......

function showAllJobs() {
    document.getElementById("section-01").classList.remove("hide-section");
    document.getElementById("section-02").classList.remove("hide-section");
    document.getElementById("section-03").classList.remove("hide-section");
    document.getElementById("section-04").classList.remove("hide-section");
    document.getElementById("section-05").classList.remove("hide-section");
    document.getElementById("section-06").classList.remove("hide-section");
    document.getElementById("section-07").classList.remove("hide-section");
}
function showJob_01() {
    document.getElementById("section-01").classList.remove("hide-section");
    document.getElementById("section-02").classList.add("hide-section");
    document.getElementById("section-03").classList.add("hide-section");
    document.getElementById("section-04").classList.add("hide-section");
    document.getElementById("section-05").classList.add("hide-section");
    document.getElementById("section-06").classList.add("hide-section");
    document.getElementById("section-07").classList.add("hide-section");
}
function showJob_02() {
    document.getElementById("section-01").classList.add("hide-section");
    document.getElementById("section-02").classList.remove("hide-section");
    document.getElementById("section-03").classList.add("hide-section");
    document.getElementById("section-04").classList.add("hide-section");
    document.getElementById("section-05").classList.add("hide-section");
    document.getElementById("section-06").classList.add("hide-section");
    document.getElementById("section-07").classList.add("hide-section");
}
function showJob_03() {
    document.getElementById("section-01").classList.add("hide-section");
    document.getElementById("section-02").classList.add("hide-section");
    document.getElementById("section-03").classList.remove("hide-section");
    document.getElementById("section-04").classList.add("hide-section");
    document.getElementById("section-05").classList.add("hide-section");
    document.getElementById("section-06").classList.add("hide-section");
    document.getElementById("section-07").classList.add("hide-section");
}
function showJob_04() {
    document.getElementById("section-01").classList.add("hide-section");
    document.getElementById("section-02").classList.add("hide-section");
    document.getElementById("section-03").classList.add("hide-section");
    document.getElementById("section-04").classList.remove("hide-section");
    document.getElementById("section-05").classList.add("hide-section");
    document.getElementById("section-06").classList.add("hide-section");
    document.getElementById("section-07").classList.add("hide-section");
}
function showJob_05() {
    document.getElementById("section-01").classList.add("hide-section");
    document.getElementById("section-02").classList.add("hide-section");
    document.getElementById("section-03").classList.add("hide-section");
    document.getElementById("section-04").classList.add("hide-section");
    document.getElementById("section-05").classList.remove("hide-section");
    document.getElementById("section-06").classList.add("hide-section");
    document.getElementById("section-07").classList.add("hide-section");
}
function showJob_06() {
    document.getElementById("section-01").classList.add("hide-section");
    document.getElementById("section-02").classList.add("hide-section");
    document.getElementById("section-03").classList.add("hide-section");
    document.getElementById("section-04").classList.add("hide-section");
    document.getElementById("section-05").classList.add("hide-section");
    document.getElementById("section-06").classList.remove("hide-section");
    document.getElementById("section-07").classList.add("hide-section");
}
function showJob_07() {
    document.getElementById("section-01").classList.add("hide-section");
    document.getElementById("section-02").classList.add("hide-section");
    document.getElementById("section-03").classList.add("hide-section");
    document.getElementById("section-04").classList.add("hide-section");
    document.getElementById("section-05").classList.add("hide-section");
    document.getElementById("section-06").classList.add("hide-section");
    document.getElementById("section-07").classList.remove("hide-section");
}

Answer 1

您可以编写一个hideJobs（作业）函数，并隐藏作为参数给出的作业。像这样的东西：

＆＃13;

function hideJobs(job) {
    document.getElementById("section-01").classList.remove("hide-section");
    document.getElementById("section-02").classList.remove("hide-section");
    document.getElementById("section-03").classList.remove("hide-section");
    document.getElementById("section-04").classList.remove("hide-section");
    document.getElementById("section-05").classList.remove("hide-section");
    document.getElementById("section-06").classList.remove("hide-section");
    document.getElementById("section-07").classList.remove("hide-section");
    document.getElementById("section-" + job).classList.add("hide-section");
}

＆＃13;

Answer 2

如果您无法更改页面源并使用库，则可以遍历ID：

function showAllJobs() {
    for ( var i = 1; i <= 7; ++ i)
       document.getElementById("section-0"+i).classList.remove("hide-section");
}

function showJob(jobNumber) {
    for ( var i = 1; i <= 7; ++ i)
       if ( i == jobNumber )
           document.getElementById("section-0"+i).classList.remove("hide-section");
       else
           document.getElementById("section-0"+i).classList.add("hide-section");
}

就部分数而言，这仍然相当脆弱。

如果你可以改变源代码来添加一个类，比如说'section'，就可以使用像jQuery这样的东西

function showAllJobs() { $('.section').show(); }
function showJob(id) {
    $('.section').not(id).hide();
    $(id).show();
}

对于您的按钮，您还可以使用this获取信息

<button onclick="showJob" href="#section-06">Job 06</button>

function showJob(){
    var id = $(this).attr('href');
    $('.section').not(id).hide();
    $(id).show();
}

如何优化这个冗余代码？

2 个答案: