Question

可以将通配符与Javascript＆＃34; document.getElementById＆＃34;一起使用。线？

我有一个带有3个div元素的Vb.net表单（＆＃34; page1，page2，page3＆＃34;）。我希望完成的是允许用户点击按钮或超链接按钮，将其导航到下一个div（＆＃34;页面＃＆＃34;）。有没有办法做以下的事情＆amp;循环遍历每个元素，其中包含＆＃34; page1＆＃34;，＆＃34; page2＆＃34;，＆＃34; page3＆＃34;等没有硬编码的ID？

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

Answer 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＆＃34; page＆＃34;并切换他们的知名度

Answer 2

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

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

Answer 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，你可以用一段时间改变for循环，如果getElementById返回null，则退出循环。

我个人喜欢Martijn的课堂创意，而不是直接改变风格，你可以添加或删除一个类ex：class =“page visible”class =“page hidden”

Javascript＆＃34; document.getElementById＆＃34;通配符循环？

3 个答案: