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>

模块信息在此
这里是Data Viewer
这里是报警页面
这里的日志设置
这里的输出控制

---

您的循环有两个问题：

您正在循环浏览一个元素列表，无需通过

id

尝试获取它们。因此，改变这两行：

var object = elements[i].id;
document.getElementById(object).className='hidden';

致：

更改该选项可以解决问题：将（）与（）进行比较，但我还没有找到原因。：-）

getElementById

返回

null

，即使您已经清楚地分配了

id

s（事实上，我们从元素中正确地获取了它们）

但是，尽管上述问题需要解决，但这并不是出现错误的原因。错误来自于您使用

for in

在

节点列表中循环。对

循环使用正常的

：

for (var i = 0; i < elements.length; ++i) {

for（变量i=0；i

请记住，
for in
是而不是关于在数组元素中循环（并且
getElementsByClassName
的返回值不是数组），它是关于在对象的可枚举属性名称中循环。在您的例子中，您会看到它循环两次：一次用于属性
“0”
，对于属性
的“length”
有一次。由于没有id为
的元素，下一行将弹出，因为
getElementById
对于该
id
返回
null

更多关于
中的
的神话和现实，更多关于循环数组的各种“正确”方法（尽管同样，这不是代码中的
元素
）

---

错误消息是什么？@everse:

uncaughttypeerror:由于某种原因，无法将属性“className”设置为null

，即使

对象

（其奇数名称！）是正确的

id

值，

getElementById

返回

null

。此处复制：（来源：）。工作起来很有魅力。第一部分是有意义的，但循环没有。我习惯于Python，其中For In方法是最佳实践。我从未见过它对数组做出这样的反应。@iyager:

For In

在JavaScript中不同于其他一些语言中的类似构造。我已经知道了发生了什么，这就是For的

-在

中，这是最基本的问题。我更新了答案，解释了发生了什么以及原因，并提供了一些链接，以帮助您在将来避免这个问题。很好的博客文章，太糟糕了，我无法在这方面给您投票。谢谢您的帮助。干杯。

for (var i = 0; i < elements.length; ++i) {