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 Uncaught TypeError: Cannot set property 'className' of undefined

Answer 1

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

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

到

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

Javascript只能部分工作

1 个答案: