如何通過點擊搜索結果添加多張卡片

Question

我當前的腳本允許您通過單擊搜索欄的結果來添加卡片+有關其內容的一些信息。

目標是創建一種電影列表。 但是，我不知道應該如何、在何處或是否應該實現一個循環來添加多張卡，而不是替換一張。

我最大的問題是點擊結果項后，活動卡被新卡替換。

第一個函數基於 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>
    `;
}

非常感謝您的幫助。

Answer 1

將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>
    `;

Answer 2

一個簡單的解決方案是代替設置cardsGroupFlex的innerHTML ，您可以將卡片附加到innerHTML的末尾。

// instead of
cardsGroupFlex.innerHTML = `...`
// appending with +=
cardsGroupFlex.innerHTML += `...`

但是，如果您要實現刪除或編輯卡片等功能，您將需要擁有卡片詳細信息的全局數組，並在displayContentDetails中循環所有這些。

此解決方案還可以利用附加到字符串的末尾。

function displayContentDetails(){

  let newInner = ''

  for (const details of globalCards) {
    inner += `
    <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>
    `
  }
}

Answer 3

一個快速說明：不要將 searchList.classList.add 用作函數/方法。 這是一個財產。 因此，請執行以下操作以添加類。

searchList.classList.add = 'hide-search-list';

這只是對您的代碼的快速觀察。

Answer 4

您正在覆蓋innerHTML而不是附加到它。 您可以附加它，請參見片段 1

 let cardsGroupFlex = document.getElementById("cardsGroupFlex"); 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> `; } let detailArray = [ { Poster: "Poster1", Title: "Title1", Plot: "Plot1" }, { Poster: "Poster2", Title: "Title2", Plot: "Plot2" }, { Poster: "Poster2", Title: "Title2", Plot: "Plot2" }, ]; for (let d of detailArray) displayContentDetails(d);

 <div id="cardsGroupFlex"></div>

然而，從性能的角度來看，總是附加到innerHTML並不是很健康，所以讓我們通過先生成結構然后再設置innerHTML來改進上面的代碼：

 let cardsGroupFlex = document.getElementById("cardsGroupFlex"); function getContentDetails(details){ return ` <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> `; } let detailArray = [ { Poster: "Poster1", Title: "Title1", Plot: "Plot1" }, { Poster: "Poster2", Title: "Title2", Plot: "Plot2" }, { Poster: "Poster2", Title: "Title2", Plot: "Plot2" }, ]; cardsGroupFlex.innerHTML = detailArray.map(item => getContentDetails(item)).join("");

 <div id="cardsGroupFlex"></div>