Javascript“document.getElementById”通配符循环？答案

【问题标题】：Javascript "document.getElementById" wildcard loop?Javascript“document.getElementById”通配符循环？
【发布时间】：2014-11-18 15:03:32
【问题描述】：

通配符可以与 Javascript “document.getElementById” 行一起使用吗？

我有一个带有 3 个 div 元素（“page1、page2、page3”）的 Vb.net 表单。我希望完成的是允许用户单击一个按钮或超链接按钮，将他们导航到下一个 div（“page#”）。有没有办法在没有硬编码的情况下执行以下操作并循环遍历每个 ID 为“page1”、“page2”、“page3”等的元素？

function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';

【问题讨论】：

这是jQuery的优势之一

标签： javascript html css vb.net loops

【解决方案1】：

据我了解，您正在寻找 querySelectorAll 函数和 for-in 循环：

var elements = document.querySelectorAll("[id^='page']");
for(var e in elements){
   // do Stuff - each element get's reached by elements[e]
}

例如：

var elements = document.querySelectorAll("[id^='page']");
for(var e in elements){
   if(elements[e].style.display == 'none')
        elements[e].style.display = 'block';
    else
        elements[e].style.display = 'none';
}

这将捕获所有 id 以“page”开头的元素并切换它们的可见性

【讨论】：

@SimplyCraig 不，请看developer.mozilla.org/de/docs/Web/JavaScript/Reference/…
使用普通的 for 循环比使用 for..in 好得多，尤其是 querySelectorAllHTMLCollection /i> 具有非元素的可枚举属性。在显示元素时最好将 display 属性设置为 ""（空字符串），以便它们采用默认或继承的样式。
@RobG 我只是重用了他的函数作为示例，因为我不知道他真正想对元素做什么，但你是对的。

【解决方案2】：

~~简短回答：不，这是不可能的。~~ 正如 Markai 所指出的，这是可能的。我仍然觉得使用类更合适，因为这样可以更好地捕捉语义。

更长一点的答案：也许你可以给每个元素一个class="page"。然后您可以隐藏该类的所有元素，只显示您感兴趣的元素。您可以使用document.getElementsByClassName('page') 或更友好的jQuery 选择器$('.page') 获取具有“页面”类的元素。

【讨论】：

【解决方案3】：

你可以循环元素。隐藏除您想要的元素之外的所有元素，而不是切换。

function EnableVisibility(elementName, elementId)
{
    for(i=1;i<4;i++)
    {
        if(i == elementId)
             document.getElementById(elementName + i).style.display = 'block';
        else
             document.getElementById(elementName + i).style.display = 'none';
    }
}

EnableVisibility("page", 2); // This would hide all pages and display page2

如果你不喜欢硬编码的 4，你可以用 while 改变 for 循环，如果 getElementById 返回 null 则退出循环。

我个人喜欢 Martijn 的类理念，而不是直接更改样式，而是添加或删除类 ex：class="page visible" class="page hidden"

【讨论】：