設置變量以針對所有具有相同 Class 的 div

Question

當使用 querySelectorAll 選擇 class 時，我得到一個未捕獲的錯誤 Uncaught TypeError: b.getBoundingClientRect is not a function at重疊有沒有辦法解決這個問題？

 function overlaps(a, b) { a = document.getElementById('char'); b = document.querySelectorAll('.enemy'); const rect1 = a.getBoundingClientRect(); const rect2 = b.getBoundingClientRect(); const isInHoriztonalBounds = rect1.x < rect2.x + rect2.width && rect1.x + rect1.width > rect2.x; const isInVerticalBounds = rect1.y < rect2.y + rect2.height && rect1.y + rect1.height > rect2.y; const isOverlapping = isInHoriztonalBounds && isInVerticalBounds; return isOverlapping; }

我使用 ID 'enemy' 生成了 div，並希望檢測與我的 div ID“char”的重疊，但 function 僅針對 ID 為“enemy”的第一個 div（控制台日志（重疊）僅在第一個 div 上觸發ID'enemy' 與 ID 'char' 重疊）。 將 class 應用到 ID 為“enemy”的 div 並選擇 getElementsByClassName 會返回“TypeError：b.getBoundingClientRect 不是重疊處的 function”。 有沒有辦法 select 所有具有相同 ID 的 div 來檢測重疊？

 function generateObstacles() { function getRandomInt(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (100 - 1 + 1)) + 1; } let randomTime = Math.random() * 2000; let obstaclePos = 100; const obstacle = document.createElement('div'); obstacle.classList.add('character'); obstacle.classList.add('enemy'); obstacle.classList.add('pixelart'); obstacle.id = 'enemy'; document.querySelector('.bg').appendChild(obstacle); let obsprite = document.createElement('img'); obsprite.src = './sprites/chars/spritesheet1.png'; obsprite.style.height = '576px'; obsprite.style.width = '384px'; obsprite.id = 'mainchar'; obstacle.appendChild(obsprite); obstacle.style.left = obstaclePos + '%'; obstacle.style.top = getRandomInt() + '%'; let timerId = setInterval(function () { if (overlaps()) { clearInterval(timerId); console.log('overlaps'); } obstaclePos -= 1; obstacle.style.left = obstaclePos + '%'; obsprite.classList.add('faceleft'); obsprite.classList.add('animation'); }, 150); setTimeout(generateObstacles, randomTime); function overlaps(a, b) { a = document.getElementById('char'); b = document.getElementById('enemy'); const rect1 = a.getBoundingClientRect(); const rect2 = b.getBoundingClientRect(); const isInHoriztonalBounds = rect1.x < rect2.x + rect2.width && rect1.x + rect1.width > rect2.x; const isInVerticalBounds = rect1.y < rect2.y + rect2.height && rect1.y + rect1.height > rect2.y; const isOverlapping = isInHoriztonalBounds && isInVerticalBounds; return isOverlapping; } }

Answer 1

正如@Andreas 在評論中指出的那樣，ID 應該是唯一的。 當您使用：

 b = document.getElementById('enemy');

系統將（很可能）找到第一個 id 敵人實例並停在那里。

如果您將所有敵人轉換為擁有 class 敵人，那么您可以這樣做：

  let enemies = document.querySelectorAll('.enemy');

注意：這為您提供了使用 class="enemy" 找到的所有元素的集合 - 選擇器的語法與您在 CSS 中使用的語法相同，因此。 在敵人之前表明它正在尋找 class 的東西。

然后你可以像數組一樣穿過敵人（它不完全是，但有些事情就像for (let i = 0; i < enemies.length; i++)所以第 i 個敵人元素是敵人 [i]