1. 首页
  2. 问答
  3. 如何优化这个冗余代码？

如何优化这个冗余代码？

2017-07-18 98 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

相关问题

 相关问题