我正在建造河內塔,但我遇到了涉及育兒元素的問題。我正在嘗試使用洗掉子項和附加子項來移動磁盤。每個塔和磁盤都有一個 ID,但是當我嘗試定位一個塔 ID 時,我得到了一個磁盤 ID。
<body>
<article class="container"></article>
<section class="towers">
<div class="tower" id="towerOne">
<div class="disk" id="diskOne"></div>
<div class="disk" id="diskTwo"></div>
<div class="disk" id="diskThree"></div>
<div class="disk" id="diskFour"></div>
</div>
<div class="tower" id="torreTwo"></div>
<div class="tower" id="torreThree"></div>
</section>
<script src="script.js"></script>
</body>
const container = document.querySelector(".container")
const towers = document.querySelectorAll(".tower")
const disks = document.querySelectorAll(".disk")
let chosenDisc = ""
let chosenTower = ""
towers.forEach(choice => choice.addEventListener("click", (e) => {
chosenTower = e.target.id
}))
disks.forEach(choices => choices.addEventListener("click", (e) => {
chosenDisc = e.target
chosenTower.removeChild(chosenDisc)
container.appendChild(chosenDisc)
}))
我沒有把所有的 ID 選擇放在那里,只是類不要太長,但它們只是名稱加數字。
uj5u.com熱心網友回復:
chosenTower是一個字串,您需要將其轉換為Element而chosenDisc是Element物件,因為e.target回傳Element物件。您可以使用querySelector函式將其轉換為元素,如下所示
你應該更換
chosenTower = e.target.id
到
chosenTower = document.querySelector('#' e.target.id);
uj5u.com熱心網友回復:
最簡單的方法是向 JS 詢問磁盤 ID 的父元素,如下所示:
disks.forEach((choice) =>
choice.addEventListener(
"click",
(e) => {
chosenDisk = e.target.id;
chosenTower = e.target.parentElement.id;
console.log(chosenDisk, " is in ", chosenTower);
},
)
);
轉載請註明出處,本文鏈接:https://www.uj5u.com/caozuo/318159.html
標籤:javascript dom 河内塔
上一篇:移除子項不包含屬性值
