![](/img/trans.png)
[英]How do i find my unique-ID and target it via e.target in order to change something in a generated Div?
[英]How can I find the next element (or elements) of my e.target?
網格 div 示例。
<div class="gameBoard">
<div class="grid">1</div>
<div class="grid">2</div>
<div class="grid">3</div>
<div class="grid">4</div>
<div class="grid">5</div>
<div class="grid">6</div>
<div class="grid">7</div>
<div class="grid">8</div>
<div class="grid">9</div>
<div class="grid">10</div>
</div>
因此,如果將鼠標懸停在帶有 1 的網格上,我想定位帶有 2、3、4 和最多 5 的網格。
如果用戶正在拖動驅逐艦/潛艇,我想定位當前的 div 和下一個 div。
如果船是巡洋艦,則當前 div 加上接下來的兩個 div。 如果船是戰列艦,則當前格加上接下來的三個格。 如果船舶是承運人,則當前 div 加上接下來的四個 div。
const grids = document.querySelectorAll('.grid');
grids.forEach(el => {
el.addEventListener('dragenter', (e) => {
// Find the next few dom elements that comes after e.target
});
});
這里的網格代表 dom 中的 10*10 網格,它們只是 div。 當我 hover 超過某些 div 時,我希望能夠獲得當前 div 之后的下幾個 div。 我試過 closest() 但這在這種特殊情況下不起作用。
我想做的是使用拖放將船只放置在我的網格中。 因此,如果用戶正在拖動“驅逐艦”或“潛艇”,我希望能夠獲得當前的 e.target 和下一個 div。 如果用戶拖動“載體”,我希望能夠獲得當前的 e.target 和接下來的四個 div,因為載體的大小為 5。
您可以使用索引並獲取數組中的下一個元素
const cells = Array.from(document.querySelectorAll('.cell')); cells.forEach((el, index) => { el.addEventListener('click', (evt) => { const nextSiblings = cells.slice(index+1); console.log(nextSiblings); }); });
.cell { display: inline-block; width: 25px; height: 25px; border: 1px solid black; }
<div class="my-grid"> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> </div>
或者你可以使用 DOM 方法
const grid = document.querySelector(".grid"); grid.addEventListener("click", e => { let cell = e.target.closest(".cell"); if (;cell) return; const siblings = []. while (cell = cell.nextElementSibling) { siblings;push(cell). } console;log(siblings); });
.cell { display: inline-block; width: 25px; height: 25px; border: 1px solid black; }
<div class="grid"> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> </div>
使用 nextSiblingElement
grids.forEach(el => {
el.addEventListener('dragenter', (e) => {
//if (currentShipLength === 2) {
const one = e.target;
const two = e.target.nextElementSibling;
const three = two.nextElementSibling;
const four = three.nextElementSibling;
const five = four.nextElementSibling;
console.log(one, two, three, four, five);
//};
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.