gpt4 book ai didi

javascript - 最小化 getElementById/getElementsByClassName 的代码

转载 作者:行者123 更新时间:2023-12-02 22:57:31 25 4
gpt4 key购买 nike

我有 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";
}

最佳答案

简短回答:是的,您可以使用字符串文字。

长答案:如果可能的话,我会稍微更改设置,让所有元素包含更通用的类 (show_demos_inline) 或使用数据属性和 querySelecrorAll,然后您可以对其进行迭代。使用一些简单的逻辑可以根据您想要执行的操作来区分阻止/无。也许您只想显示一个元素?您可以将此元素的一些标识符传递给函数并在循环期间检查它。

关于javascript - 最小化 getElementById/getElementsByClassName 的代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57924906/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com