javascript - 最小化 getElementById/getElementsByClassName 的代码

Question

我有 2 block 代码，最初形成 120 行代码，其中有很多重复。我还预见到代码行将会增加。下面你会发现一个最小的提取。

问题:

是否可以迭代 [getElementById] 和 [getElementsByClassName] ？

或者我应该分解字符串中的文本并使用变量构造新字符串？

“模板文字”可以通过在字符串中嵌入表达式来解决吗？

<小时/>

需要更改的行有一些不同:数字、子集 [x] 和“block”/“none”。

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，然后您可以对其进行迭代。使用一些简单的逻辑可以根据您想要执行的操作来区分阻止/无。也许您只想显示一个元素？您可以将此元素的一些标识符传递给函数并在循环期间检查它。