1. 首頁
  2. 問答
  3. 如何優化這個冗餘代碼？

如何優化這個冗餘代碼？

2017-07-18 96 views
-2

如何縮短以下代碼？我正處於我的旅程中。 請忽略此介紹文本的其餘部分，這只是使我的帖子更長的幾句話，因爲stackoverflow幾乎沒有我的解釋和多少代碼ist。不理會，讓你的手髒與代碼...如何優化這個冗餘代碼？

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"); 
 
}

來源

2017-07-18 jeyy

+4

我想你應該要求它在代碼審查 –

+1

你可以代替寫一個函數，它會基於什麼論據刪除/添加（<部分的ID>）你給。 –

+0

請將其移動代碼審查。 – murli2308

回答

0

你可以寫一個hideJobs（作業）函數，而不是和隱藏給定的參數工作。是這樣的：

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"); 
 
}

來源

2017-07-18 13:28:41 Dij

+0

這是一個按鈕的樣子，我怎樣才能讓它通過「01」，「02」等？ Job – jeyy

+0

也許這樣嗎？ Job – jeyy

+0

'Job'將是正確的。 – Dij

0

如果您不能更改網頁源代碼，並使用一個庫，你可以遍歷所有的IDS：

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"); 
}

這仍然是相當脆在部分的數量方面。

如果你可以更改源增加一類，說「部分」，所有部分的東西，然後使用類似的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(); 
}

來源

2017-07-18 14:04:01

相關問題

 相關問題