最小化getElementById / getElementsByClassName的代码

Question

我有2个代码块，这些代码块最初形成120行代码，并且有很多重复。 我还预见到代码行将会增长。 在下面您可以找到最少的提取量。

题：

是否可以遍历[getElementById]和[getElementsByClassName]？

还是应该将文本分成字符串并使用变量构造新的字符串？

通过将表达式嵌入字符串，可以解决“模板文字”问题吗？

---

行中有一些需要更改的区别：数字，子集[x]和“块” /“无”。

function display_page_2_button_1() {
    document.getElementById("show_services_inline_1").style.display = "block";
    document.getElementById("show_services_inline_2").style.display = "none";
}

function display_page_4_button_1() {
    document.getElementsByClassName("show_demos_inline_1")[0].style.display = "block";
    document.getElementsByClassName("show_demos_inline_1")[1].style.display = "block";
    document.getElementsByClassName("show_demos_inline_2")[0].style.display = "none";
    document.getElementsByClassName("show_demos_inline_2")[1].style.display = "none";
}

Answer 1

简短的答案：是的，您可以为此使用字符串文字。

长答案：如果可能的话，我将稍作更改以使所有元素都包括一个更通用的类（show_demos_inline）或使用数据属性和querySelecrorAll，然后可以对其进行迭代。 然后，根据您要执行的操作，使用一些简单的逻辑就可以区分块/无。 也许您只想显示一个元素？ 您可以将此元素的一些标识符传递给函数，并在循环期间进行检查。

Answer 2

下面的代码将代码行的数量减至最少（假设起始点为+120行）。 它还可以应付div数量的增长。

在脚本开始处创建一个函数，以首先关闭所有div。 每个[display_page_2_button_X]函数只能使一个div可见。

它使用“模板文字”来修改代码，以便我可以在for循环中运行字符串。

[服务]的代码：

service = "show_services_inline_";

function hide_all_services_div() {
    for (i = 1; i < 6; i++) {
        document.getElementById(`${service}${i}`).style.display = 'none';
    }
}

function display_page_2_button_1() {
    hide_all_services_div();
    document.getElementById(`${service}1`).style.display = "block";
}

[demos]的代码：

demo = "show_demos_inline_";

function hide_all_demos_div() {
    for (i = 1; i < 6; i++) {
        document.getElementsByClassName(`${demo}${i}`)[0].style.display = "none";
    }

    for (i = 1; i < 6; i++) {
        document.getElementsByClassName(`${demo}${i}`)[1].style.display = "none";
    }
}

function display_page_4_button_1() {
    hide_all_demos_div();
    document.getElementsByClassName(`${demo}1`)[0].style.display = "block";
    document.getElementsByClassName(`${demo}1`)[1].style.display = "block";
}