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只能部分工作

回答

相關問題