我當前的腳本允許您通過單擊搜索欄的結果來添加卡片 有關其內容的一些資訊。
目標是創建一種電影串列。但是，我不知道應該如何、在何處或是否應該實作一個回圈來添加多張卡，而不是替換一張。
我最大的問題是點擊結果項后，活動卡被新卡替換。
第一個函式基于 API 加載內容。單擊研究顯示的專案后，它基本上會清除搜索欄。它還呼叫負責將 div（帶有電影資訊的卡片）添加到 HTML 的函式。
function loadContentDetails(){
const searchListContent = searchList.querySelectorAll('.search-list-item');
searchListContent.forEach(content => {
content.addEventListener('click', async () =>{
searchList.classList.add('hide-search-list');
searchBar.value = "";
const result = await fetch(`http://www.omdbapi.com/?i=${content.dataset.id}&apikey=60ee3e91`);
const contentDetails = await result.json();
displayContentDetails(contentDetails);
});
});}
第二個函式根據用戶通過搜索欄選擇的內容創建一張新卡片。
function displayContentDetails(details){
cardsGroupFlex.innerHTML = `
<div class="card">
<img src="${(details.Poster != "N/A") ? details.Poster: "resources/img-not-found.png"}" alt="" class="card-img" />
<div class="card-description">
<p class="card-title">${details.Title}</p>
<p> ${(details.Plot)} </p>
</div>
</div>
`;}
非常感謝您的幫助。
uj5u.com熱心網友回復：
更改cardsGroupFlex.innerHTML =為cardsGroupFlex.innerHTML =（在“=”之前添加一個“ ”號）。這會將新卡片連接到 innerHTML，而不是用新卡片替換 innerHTML：
cardsGroupFlex.innerHTML = `
<div class="card">
<img src="${(details.Poster != "N/A") ? details.Poster: "resources/img-not-found.png"}" alt="" class="card-img" />
<div class="card-description">
<p class="card-title">${details.Title}</p>
<p> ${(details.Plot)} </p>
</div>
</div>
`;
uj5u.com熱心網友回復：
一個簡單的解決方案是代替設定innerHTMLof cardsGroupFlex，您可以將卡片附加到innerHTML.
// instead of
cardsGroupFlex.innerHTML = `...`
// appending with =
cardsGroupFlex.innerHTML = `...`
但是，如果您要實作洗掉或編輯卡片之類的功能，您將需要擁有卡片詳細資訊的全域陣列，并在displayContentDetails.
此解決方案還可以利用附加到字串的末尾。
function displayContentDetails(){
let newInner = ''
for (const details of globalCards) {
inner = `
<div >
<img src="${(details.Poster != "N/A") ? details.Poster: "resources/img-not-found.png"}" alt="如何通過點擊搜索結果添加多張卡片" />
<div >
<p >${details.Title}</p>
<p> ${(details.Plot)} </p>
</div>
</div>
`
}
}
uj5u.com熱心網友回復：
一個快速說明：不要將 searchList.classList.add 用作函式/方法。這是一個財產。因此，請執行以下操作以添加類。
searchList.classList.add = 'hide-search-list';
這只是對您的代碼的快速觀察。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/483138.html
標籤：javascript html css 弹性盒
下一篇：同步使用fetchPromise