我有一个对象数组:
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个数组,但是我不确定如何跟踪单击按钮时要显示哪个数组。
答案 0 :(得分:1)
您可以使用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>