如何通过点击搜索结果添加多张卡片

Question

我当前的脚本允许您通过单击搜索栏的结果来添加卡片及其内容的一些信息。

objective 是创建一种电影列表。但是，我不知道我应该如何、在哪里或是否应该实现一个循环来添加多张卡片，而不是替换一张。

我最大的问题是点击结果项后，活动卡片是被新的取代。

第一个函数根据 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 用作 function/method。这是一个属性。所以按照以下步骤添加类.

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>

如何通过点击搜索结果添加多张卡片

How to add multiple cards by clicking on the search result

html

javascript

css

flexbox