該代碼按預期作業，但如果我使用，for (let line in hamburgerLines) {...}我會收到以下錯誤：“未捕獲的型別錯誤：無法在 HTMLDivElement.addClass 讀取未定義的屬性（讀取‘切換’）”。
我使用此警報功能alert("Here: " line " " hamburgerLines[line] " " hamburgerLines.length); 來了解發生了什么。它通常會迭代 3 次并hamburgerLines.length確實回傳，3但又一次彈出：“這里：條目函式條目（）{ [本機代碼]} 3”我認為這會導致錯誤。
我已經通過將其更改為來解決此問題，for (let line = 0; line < hamburgerLines.length; line ) {...}但想知道為什么它會再次通過 for 回圈進行迭代。
let hamburgerButton = document.getElementById('hamburger-button');
hamburgerButton.addEventListener('click', addClass);
function addClass() {
let hamburgerLines = document.querySelectorAll('.hamburger-line');
for (let line in hamburgerLines) {
hamburgerLines[line].classList.toggle('open-test');
}
}header #hamburger-button {
position: absolute;
width: 50px;
height: 40px;
top: 30px;
right: 50px;
cursor: pointer;
}
/* ---- Untoggled Hamburger Button ---- */
header .hamburger-line:nth-child(1) {
width: 1px;
height: 30px;
background-color: #000;
position: absolute;
right: 0px;
-webkit-transition: .5s ease-in-out;
}
header .hamburger-line:nth-child(2) {
width: 1px;
height: 20px;
background-color: #000;
position: absolute;
right: 10px;
-webkit-transition: .5s ease-in-out;
}
header .hamburger-line:nth-child(3) {
width: 1px;
height: 14px;
background-color: #000;
position: absolute;
right: 20px;
-webkit-transition: .5s ease-in-out;
}
/* ---- Toggled Hamburger Button ---- */
header .hamburger-line.open-test:nth-child(1) {
width: 1px;
height: 30px;
background-color: #F00;
position: absolute;
right: 10px;
-webkit-transition: .5s ease-in-out;
transform: rotate(45deg);
}
header .hamburger-line.open-test:nth-child(2) {
width: 1px;
height: 20px;
background-color: #FFF;
position: absolute;
transform: translateY(20px);
-webkit-transition: .5s ease-in-out;
opacity: 0;
}
header .hamburger-line.open-test:nth-child(3) {
width: 1px;
height: 30px;
background-color: #F00;
position: absolute;
right: 10px;
-webkit-transition: .5s ease-in-out;
transform: rotate(-45deg);
}<header>
<div id="hamburger-button">
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
</div>
</header>uj5u.com熱心網友回復：
document.querySelectorAll()回傳一個NodeList物件，檢查NodeList 檔案
不要使用 for...in 來列舉 NodeLists 中的專案，因為如果您的腳本假定它只需要處理元素物件，它們也會列舉其長度和專案屬性并導致錯誤。此外，不能保證 for..in 以任何特定順序訪問屬性。
for...of 回圈將正確回圈 NodeList 物件：
最近的瀏覽器還支持迭代器方法（forEach()）以及entries()、values() 和keys()。
uj5u.com熱心網友回復：
您應該使用for..of回圈，而不是for..in和toggle班級為：
line.classList.toggle('open-test');
addClass 功能
function addClass() {
let hamburgerLines = document.querySelectorAll('.hamburger-line');
for (let line of hamburgerLines) {
line.classList.toggle('open-test');
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/357348.html
標籤：javascript html css
上一篇：我似乎無法弄清楚正則運算式
下一篇：回圈遍歷嵌套陣列以回傳物件的值