JavaScript 只能部分工作

Question

我想创建一个脚本，单击后将删除两个 li 项目上的类，并将类添加到另一个 li 项目。我已经使用了 .className 方法，但它只能部分工作。

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav navbar-right">
        <li class="tbh lista">
            <a href="#"><img src="images/facebook.png"></a>
        </li>
        <li class="tbh lista">
            <a href="#"><img src="images/mail.png"></a>
        </li>
        <li class="lista">
            <a href="#" onclick="changeClass()" id="phone"><img     src="images/phone.png"></a>
        </li>
        <li class="lista hidden">
            <p>text</p>
        </li>
    </ul>
</div>

这是脚本:

function changeClass(){
    var elements = document.getElementsByClassName('tbh');
    for (var i = 0, len = elements.length; i <=len; i++) {
        elements[i].className='hidden';

        console.log('aaa');
    }
}

我单击 li 项目一次后，只有一个 li 项目消失，并且出现错误。我必须单击它两次才能正常运行。我找不到错误。 这些显示在 console.log 中:aaa 未捕获的类型错误:无法设置未定义的属性“className”

Answer 1

这是因为 document.getElementsByClassName 返回 HTMLCollection 而不是 Array。所以改变你的字符串

var elements = document.getElementsByClassName('tbh');

至

var elements = Array.from(document.getElementsByClassName('tbh'));