0

我正在尝试使用对象的 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>

4

1 回答 1

0

你的循环有两个问题：

  1. 你正在循环一个元素列表，没有必要再去尝试获取它们id。所以改变这两行：

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

    到：

    elements[i].className='hidden';

    更改以解决问题：将此工作版本（源）与您的原始版本（源）进行比较，但我还没有弄清楚为什么。:-)getElementById正在返回null，即使您已经明确分配了ids （事实上，我们从元素中正确获取了它们）。

  2. 但是，虽然以上是您需要解决的问题，但这并不是您遇到错误的原因。错误来自您使用for-in循环遍历NodeList. 使用正常for循环：

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

    请记住，这不是for-in循环遍历数组元素（并且 from 的返回值不是数组），而是循环遍历对象的可枚举属性名称。在您的情况下，您会看到它循环两次：一次用于 property ，一次用于 property 。由于您没有带有 的元素，因此您的下一行会爆炸，因为返回.getElementsByClassName"0""length"id "length"getElementByIdnullid

    for-in 更多关于我的博客的神话和现实，以及更多关于循环数组的各种“正确”方法（尽管同样，这不是elements你的代码中的内容）在 Stack Overflow 上。

于 2013-06-22T07:51:10.433 回答