Javascript只能部分工作

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

<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'); 
    } 
}

我点击李项一次后，只有李一个项目消失了，我得到一个错误。我必须点击两次才能正常工作。我找不到错误。这些显示在console.log中：aaa Uncaught TypeError: Cannot set property 'className' of undefined

来源

2016-10-23 Flav Flavius

'<='似乎是罪魁祸首。 – Knu

我已将它修改为<，仍然是同样的错误。 –

add comsole.log（i），看看哪个元素丢失 –

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

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

改变

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

来源

2016-10-23 08:37:43

它的工作，非常感谢！ :) –

Javascript只能部分工作

回答

相关问题