如何在一次单击按钮时一次从数组中加载N个项目

问题描述

我有一个对象数组：

const resourcesData = [
  {
    title: 'Title 01',description: 'Description for Title 01',},{
    title: 'Title 02',description: 'Description for Title 02',{
    title: 'Title 03',description: 'Description for Title 03',{
    title: 'Title 04',description: 'Description for Title 04',{
    title: 'Title 05',description: 'Description for Title 05',];

当前使用模板文字将它们加载到DOM中：

function resourceTemplate(resource) {
  return `
    <div>
      <h2>${resource.title}</h2>
      <p>${resource.description}</p>
    </div>
  `;
}

function loadResources() {
  document.getElementById('resources').innerHTML = resourcesData
    .map(resourceTemplate)
    .join('');
}

当我一次加载所有它们时，它可以工作。 如何一次只加载2个，而单击时仅显示接下来的2个？

要显示2个项目，请点击“加载更多”按钮，然后显示接下来的2个项目。 然后，当到达数组末尾时，它将仅显示一个，并且将隐藏“加载更多”按钮。

---

根据我的要求更新 以前，我尝试使用for循环先像这样对结果进行切片：

console.log(resourcesData.length);
let result = [];

for (let i = 0; i < resourcesData.length; i += 2) {
  result = resourcesData.slice(i,i + 2);
  console.log(result);
}

我回来了3个数组，但是我不确定如何跟踪单击按钮时要显示哪个数组。

解决方法

您可以使用splice从数组中提取一定数量的元素：

const resourcesData = [{"title":"Title 01","description":"Description for Title 01"},{"title":"Title 02","description":"Description for Title 02"},{"title":"Title 03","description":"Description for Title 03"},{"title":"Title 04","description":"Description for Title 04"},{"title":"Title 05","description":"Description for Title 05"}];

function resourceTemplate(resource) {
  return `
    <div>
      <h2>${resource.title}</h2>
      <p>${resource.description}</p>
    </div>
  `;
}

function loadResources() {
  document.getElementById('resources').innerHTML += resourcesData
    .splice(0,2) // <-----------------------------------------------------
    .map(resourceTemplate)
    .join('');
    
  if (resourcesData.length === 0) { btn.style.display = 'none'; }
}

btn.addEventListener('click',loadResources);

<div id="resources"></div>
<button id="btn">Load resources</button>