javascript - 如何在单击按钮时一次从数组中加载 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
从 Array 中提取一定数量的元素:
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>
推荐阅读
- javafx - 显示的 Ikonli 图标不正确
- google-sheets - 是否有可能在谷歌文档中创建基于查询的图表?
- aws-lambda - CloudFormation 无服务器函数堆栈错误 - GetObject 发生错误。S3 错误代码:NoSuchKey
- java - 防止菜单超出屏幕尺寸
- javascript - 在单击 JS 初学者时从外部源替换图像
- webpack - 如何使用 `style-loader` 缩小 SCSS 并注入 DOM
- azure - Azure AD B2C:强制密码重置首次登录不起作用(使用自定义策略)
- flutter - Flutter 错误:没有为类 '_HomePageState' 定义 getter 'AudioPlayerState'
- java - 使用 Xtext 2.25 进行密钥形式验证
- json - 如何使用角度在 json/json 内的对象内显示数据