Javascript更改类的问题
我正在尝试使用对象的onclick通知符来更改div的类。代码看起来应该可以工作，但当我使用Firebug进行故障排除时，似乎我的for循环(甚至Firebug显示其中只有1个元素)执行了不止一次，并在第二次执行时抛出错误。这是Javascript：
function handleElements(elementid,containerid) {
// Get array of all 'visible' elements in the container
var elements = document.getElementById(containerid).getElementsByClassName('visible');
// Iterate over that array and make them all 'hidden'
for (var i in elements) {
var object = elements[i].id;
document.getElementById(object).className='hidden';
}
// Get the 'clicked' tab and set it to 'visible'
var clicked = document.getElementById(elementid);
clicked.className='visible';
}下面是HTML：
<div id="wrapper">
<div id="leftpanel">
<div id="navcontainer">
<ul id="navlist">
<li><a href="javascript:;" onClick="handleElements('Modules','rightpanel')">Modules</a></li>
<li><a href="javascript:;" onClick="handleElements('DataViewer','rightpanel')">Data Viewer</a><li>
<li><a href="javascript:;" onClick="handleElements('Alarms','rightpanel')">Alarms</a><li>
<li><a href="javascript:;" onClick="handleElements('Logging','rightpanel')">Logging</a><li>
<li><a href="javascript:;" onClick="handleElements('Outputs','rightpanel')">Output Control</a><li>
</ul>
</div>
</div>
<div id="rightpanel">
<div id="Modules" class="visible">
<h2>Module Information Here</h2>
</div>
<div id="DataViewer" class="hidden">
<h2>Data Viewer Here</h2>
</div>
<div id="Alarms" class="hidden">
<h2>Alarm Page Here</h2>
</div>
<div id="Logging" class="hidden">
<h2>Logging Setup Here</h2>
</div>
<div id="Outputs" class="hidden">
<h2>Output Control Here</h2>
</div>
</div>
回答 1
Stack Overflow用户
发布于 2013-06-22 07:51:10
你的循环有两个问题：
- 你正在遍历一个元素列表，没有必要去尝试通过
id来获取它们。因此，请更改这两行：
document.getElementById(object).className='hidden'；对象= elementsi.id；var
至：
Elementsi.className=‘隐藏’；
改变这一点解决了这个问题:将this working version (source)与your original (source)进行比较，但我还不知道为什么。:-) getElementById返回null，即使您已经明确分配了id(实际上，我们从elements).
- But中正确地获取了它们)，虽然上面的内容是您需要修复的，但这不是您出现错误的原因。错误来自于您使用
for-in在NodeList中循环。使用普通的for循环：
对于(var i= 0；i< elements.length；++i) {
请记住，for-in是关于遍历数组元素的 not (并且getElementsByClassName的返回值不是一个数组)，它是关于遍历对象的可枚举属性名的。在本例中，您会看到它循环了两次:一次是针对属性"0"，另一次是针对属性"length"。由于您的id "length"中没有元素，因此下一行代码将会中断，因为getElementById会为该id返回null。
更多关于for-in on my blog的神话和现实，以及更多关于循环遍历数组的各种“正确”方法的更多信息(尽管同样，这不是您代码中的elements ) here on Stack Overflow.
https://stackoverflow.com/questions/17248517
复制相似问题
腾讯云开发者
