如何通过单击搜索结果来添加多张卡

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

一个简单的解决方案是，而不是设置innerhtml的cardsGroupflex，您可以将卡附加到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 2

更改cardsGroupflex.innerhtml = cardsgroupflex.innerhtml += （在“ =”之前添加一个“ +”符号）。这将 condenate in 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 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并不是很健康，因此，让我们首先通过生成结构来改进上面的代码，然后才设置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>