用于循环的 Javascript 代码 getElementByID答案

【问题标题】：Javascript code getElementByID for loop用于循环的 Javascript 代码 getElementByID
【发布时间】：2015-07-23 16:36:16
【问题描述】：

我不明白为什么下面的 for 循环不起作用。

我创建了一个可以正常工作的函数，因此 HTML 不是问题。这是有效的功能：

function deactivateAllTabs() {
    document.getElementById('tab-header-1').className = 'tab-header';
    document.getElementById('tab-header-2').className = 'tab-header';
    document.getElementById('tab-header-3').className = 'tab-header';
    document.getElementById('tab-content-1').className = 'tab-content';
    document.getElementById('tab-content-2').className = 'tab-content';
    document.getElementById('tab-content-3').className = 'tab-content'; 
}

我认为我应该创建一个 for 循环来自动处理未来的其他选项卡，而不是硬编码选项卡标题和选项卡内容 ID。

如果我分别添加另一组：

document.getElementById('tab-header-4').className = 'tab-header';
document.getElementById('tab-content-4').className = 'tab-content';

一切正常。当我尝试下面的 for 循环时它失败了。知道我哪里出错了吗？

点击选项卡时出现的错误是：

未捕获的类型错误：无法将属性“className”设置为 null

function deactivateAllTabs() {
    for (var i = 0; i < tabHeaders.length; i++) {
        document.getElementById('tab-header-'+i).className = 'tab-header';
        document.getElementById('tab-content-'+i).className = 'tab-content';
    }
}

【问题讨论】：

您有 ID 为 tab-header-0 和 tab-content-0 的元素吗？
document.getElementById('tab-header-'+ (i+1)).className = 'tab-header'; 和下一行相同。
谢谢你，马特 - 看起来你找到了。再次感谢。

标签： javascript html loops for-loop getelementbyid

【解决方案1】：

您的循环从 0 开始，但您的选项卡标题从 1 开始。

function deactivateAllTabs() {
    for (var i = 1; i <= tabHeaders.length; i++) {
        document.getElementById('tab-header-'+i).className = 'tab-header';
        document.getElementById('tab-content-'+i).className = 'tab-content';
    }
}

【讨论】：

没错，但您刚刚发布了相同的损坏代码。最好发布 fixed 代码。
现在它不会得到最后一个
谢谢你们 - 多么明显。（我忽略了从零开始的循环）。当另一双眼睛有一个目标时，总是会有所帮助。再次感谢。 :)
只是为了跟进 - 正确。代码从 1 开始循环。感谢大家的输入。请让我知道我是否遗漏了一些可以将答案归功于您的东西，因为我不经常使用它...

【解决方案2】：

查看 Neil 的答案以解决您的问题

这是使用 jquery 的替代答案

您可以选择所有以相同名称开头的选项卡并更改其类而无需循环。

$('div[id^="tab-header-"]').attr('class', 'tab-header');
$('div[id^="tab-content-"]').attr('class', 'tab-content');

【讨论】：

【解决方案3】：

您的 for 循环索引为零，但选项卡索引为 1。这应该从 1 而不是 0 开始。对吧？

function deactivateAllTabs() {
    for (var i = 1; i < tabHeaders.length; i++) {
        document.getElementById('tab-header-'+i).className = 'tab-header';
        document.getElementById('tab-content-'+i).className = 'tab-content';
    }
}

【讨论】：

i = i?如果你的意思是i = 1，你仍然需要修复i <= tabHeader.length

【解决方案4】：

我认为你可以使用。

function deactivateAllTabs() { 
    for (var i = 0; i < tabHeaders.length; i++) {
        document.getElementById('tab-header-'+i).setAttr(className, 'tab-header'); 
        document.getElementById('tab-content-'+i).setAttr(className,'tab-content'); 
    } 
}

【讨论】：