當用戶單擊按鈕時，此 forEach 回圈會創建 html 元素（卡片），但如果用戶再次單擊按鈕，則所有卡片都應該被洗掉。在我的情況下，當我再次單擊按鈕時，只有第一張卡片消失了。我知道這與 id 有關。我試圖這樣做（），但我不知道下一步該怎么做才能洗掉所有卡片。感謝關注
function getFood(){
if (foodBtn.classList.contains("yes")){
fetch("http://localhost:1314/getByType/food")
.then((resp => {
return resp.json();
}))
.then((resp) => {
resp.forEach(elem => {
div.innerHTML = `<div id="MyFood">
<div style="width: 18rem;">
<img src="${elem.image}" alt="無法洗掉由 forEach 創建的所有卡片">
<div >
<b>price: ${elem.price} $</b>
<p >description: ${elem.description}</p>
<p >amount: ${elem.amount}</p>
</div>
</div>
</div>`
})
})
foodBtn.classList.remove("yes");
foodBtn.classList.add("no");
}else {
const q = document.getElementById('MyFood');
console.log(q);
q.innerHTML = "";
foodBtn.classList.remove("no");
foodBtn.classList.add("yes");
}
}uj5u.com熱心網友回復：
你確實是對的。在 html 中，ID 是唯一的，因此對多個實體使用相同的 ID 可能無法按預期作業。解決方案是在生成中添加一些可以創建唯一 ID 的內容，例如
resp.forEach((elem, index) => {
div.innerHTML = `<div id="MyFood${index}">
<div style="width: 18rem;">
<img src="${elem.image}" alt="無法洗掉由 forEach 創建的所有卡片">
<div >
<b>price: ${elem.price} $</b>
<p >description: ${elem.description} </p>
<p >amount: ${elem.amount}</p>
</div>
</div>
</div>`
})
或者使用一個類而不是一個 ID（我個人會用這個）
resp.forEach(elem => {
div.innerHTML = `<div >
<div style="width: 18rem;">
<img src="${elem.image}" alt="無法洗掉由 forEach 創建的所有卡片">
<div >
<b>price: ${elem.price} $</b>
<p >description: ${elem.description}</p>
<p >amount: ${elem.amount}</p>
</div>
</div>
</div>`
})
然后選擇和洗掉只需呼叫
const q = document.querySelectorAll('.MyFood');
for (let i = 0; i < q; i ) {
q[i].remove();
}
uj5u.com熱心網友回復：
多個 HTML 元素不能共享同一個 ID。這就是為什么當您嘗試選擇時，#MyFood您只會得到一個。相反，您可以將其更改為類，這有點像多個元素的 ID。在div.innerHTML = ...中，將字串的第一部分從 更改<div id="MyFood" ...為<div ...，然后在您else需要將選擇器更改為類：
const elements = [...document.getElementsByClassName("MyFood")]; // you can also do: [...document.querySelectorAll(".MyFood")]
elements.forEach(el => el.remove()); // loop through array of elements and remove each one
// ...
了解有關選擇器的更多資訊：https ://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
uj5u.com熱心網友回復：
這當然是一個id問題。如果多個 HTML 元素共享相同的id，則當您呼叫時，getElementById()只會呼叫具有該 id 的第一個元素。要在不更改大部分代碼的情況下解決此問題，id您可以嘗試設定然后呼叫getElementsByClassName()方法，而不是使用。
如果出于某種原因您需要id="MyFood"元素出現在代碼中，另一種方法是將所有卡片包裝在div這樣的內部：
<div id="MyFood">
...cards here
</div>
那么您的其余代碼將在不更改任何內容的情況下作業。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/422956.html
標籤：
上一篇：將斜杠命令設為私有