我还有另一个要求,这让我的生活更加复杂。
当我单击“查看更多”按钮时,我想将更多数据加载到我的 html 中。理想情况下,我应该只显示 4 个项目。每个负载应该再增加 2 个。
现在,最好的方法是什么?如果可能的话,我想要一个提示,或者如果你可以请一个更详细的方向。
const friendAndFamily = [{
name: "Serena Gosling",
supporterNumber: "0123456789",
isStrongRelationship: true,
ticketingPoints: "2,500 Ticket Points",
thumbnailUrl: "https://i.pravatar.cc/100"
},
{
name: "Dominic Macklin",
supporterNumber: "0123456789",
isStrongRelationship: true,
ticketingPoints: "2,500 Ticket Points",
thumbnailUrl: "https://i.pravatar.cc/100"
},
{
name: "Tom Wilkins",
supporterNumber: "0123456789",
isStrongRelationship: true,
ticketingPoints: "2,500 Ticket Points",
thumbnailUrl: "https://i.pravatar.cc/100"
},
{
name: "George Whipday",
supporterNumber: "0123456789",
isStrongRelationship: false,
ticketingPoints: "2,500 Ticket Points",
thumbnailUrl: "https://i.pravatar.cc/100"
},
{
name: "Leon Gosling",
supporterNumber: "0123456789",
isStrongRelationship: true,
ticketingPoints: "2,500 Ticket Points",
thumbnailUrl: "https://i.pravatar.cc/100"
},
{
name: "Dominic Macklin",
supporterNumber: "0123456789",
isStrongRelationship: true,
ticketingPoints: "2,500 Ticket Points",
thumbnailUrl: "https://i.pravatar.cc/100"
},
{
name: "Ollie Wilkins",
supporterNumber: "0123456789",
isStrongRelationship: true,
ticketingPoints: "2,500 Ticket Points",
thumbnailUrl: "https://i.pravatar.cc/100"
},
{
name: "Jack Whipday",
supporterNumber: "0123456789",
isStrongRelationship: false,
ticketingPoints: "2,500 Ticket Points",
thumbnailUrl: "https://i.pravatar.cc/100"
},
{
name: "Davide Wilkins",
supporterNumber: "0123456789",
isStrongRelationship: true,
ticketingPoints: "2,500 Ticket Points",
thumbnailUrl: "https://i.pravatar.cc/100"
},
{
name: "Murilo Whipday",
supporterNumber: "0123456789",
isStrongRelationship: false,
ticketingPoints: "2,500 Ticket Points",
thumbnailUrl: "https://i.pravatar.cc/100"
}
];
function getFriendAndFamilyData(supporter) {
const {
thumbnailUrl,
name,
isStrongRelationship,
supporterNumber,
ticketingPoints
} = supporter;
// check if the boleen above returns true or false
const relationship = isStrongRelationship ?
'<i class="supporter__relationship">Strong relationship</i>' :
'<i class="is-d-none">Not a strong relationship</i>';
return `
<div class="supporter">
<h4 class="supporter__name">
<span class="supporter__thumbnail"><img src="${thumbnailUrl}"></span>
${name}
${relationship}
<span class="supporter__number">(${supporterNumber})</span>
</h4>
<span class="supporter__points">${ticketingPoints}</span>
</div>
`;
}
//GRAB THE ID HERE
document.querySelector("#rmFriendsAndRelativesContent").innerHTML =
`
<h5>My Friends & Family (${friendAndFamily.length} results)</h5>
${friendAndFamily.map(getFriendAndFamilyData).join("")}
<button class="btn-footer" type="button" aria-expanded="false">See more ${friendAndFamily.length}</button>
`;
<div id="rmFriendsAndRelativesContent"></div>
您可以通过代码中的一些解释来尝试这个
const friendAndFamily = [{
name: "Serena Gosling",
supporterNumber: "0123456789",
isStrongRelationship: true,
ticketingPoints: "2,500 Ticket Points",
thumbnailUrl: "https://i.pravatar.cc/100"
},
{
name: "Dominic Macklin",
supporterNumber: "0123456789",
isStrongRelationship: true,
ticketingPoints: "2,500 Ticket Points",
thumbnailUrl: "https://i.pravatar.cc/100"
},
{
name: "Tom Wilkins",
supporterNumber: "0123456789",
isStrongRelationship: true,
ticketingPoints: "2,500 Ticket Points",
thumbnailUrl: "https://i.pravatar.cc/100"
},
{
name: "George Whipday",
supporterNumber: "0123456789",
isStrongRelationship: false,
ticketingPoints: "2,500 Ticket Points",
thumbnailUrl: "https://i.pravatar.cc/100"
},
{
name: "Leon Gosling",
supporterNumber: "0123456789",
isStrongRelationship: true,
ticketingPoints: "2,500 Ticket Points",
thumbnailUrl: "https://i.pravatar.cc/100"
},
{
name: "Dominic Macklin",
supporterNumber: "0123456789",
isStrongRelationship: true,
ticketingPoints: "2,500 Ticket Points",
thumbnailUrl: "https://i.pravatar.cc/100"
},
{
name: "Ollie Wilkins",
supporterNumber: "0123456789",
isStrongRelationship: true,
ticketingPoints: "2,500 Ticket Points",
thumbnailUrl: "https://i.pravatar.cc/100"
},
{
name: "Jack Whipday",
supporterNumber: "0123456789",
isStrongRelationship: false,
ticketingPoints: "2,500 Ticket Points",
thumbnailUrl: "https://i.pravatar.cc/100"
},
{
name: "Davide Wilkins",
supporterNumber: "0123456789",
isStrongRelationship: true,
ticketingPoints: "2,500 Ticket Points",
thumbnailUrl: "https://i.pravatar.cc/100"
},
{
name: "Murilo Whipday",
supporterNumber: "0123456789",
isStrongRelationship: false,
ticketingPoints: "2,500 Ticket Points",
thumbnailUrl: "https://i.pravatar.cc/100"
}
];
//create chunks from the above dataset
function createChunksFromArray(array, length) {
var chunks = [], i = 0, n = array.length;
while (i < n) {
chunks.push(array.slice(i, i += length));
}
return chunks;
}
//as you said, you want to get 2 items from the list, so chunk length would be 2
const chunkLength = 2;
//the default chunk index as for getting 4 items initially
let currentChunkIndex = 1;
const chunks = createChunksFromArray(friendAndFamily, chunkLength);
function getFriendAndFamilyData(supporter) {
const {
thumbnailUrl,
name,
isStrongRelationship,
supporterNumber,
ticketingPoints
} = supporter;
// check if the boleen above returns true or false
const relationship = isStrongRelationship ?
'<i class="supporter__relationship">Strong relationship</i>' :
'<i class="is-d-none">Not a strong relationship</i>';
return `
<div class="supporter">
<h4 class="supporter__name">
<span class="supporter__thumbnail"><img src="${thumbnailUrl}"></span>
${name}
${relationship}
<span class="supporter__number">(${supporterNumber})</span>
</h4>
<span class="supporter__points">${ticketingPoints}</span>
</div>
`;
}
//GRAB THE ID HERE
document.querySelector("#rmFriendsAndRelativesContent").innerHTML =
`
<h5>My Friends & Family (${friendAndFamily.length} results)</h5>
<div id="data-list">${[...chunks[0], ...chunks[1]].map(getFriendAndFamilyData).join("")}</div>
<button class="btn-footer" type="button" aria-expanded="false" onclick="seeMore()" id="see-more-button">See more ${friendAndFamily.length - chunkLength*(currentChunkIndex + 1)}</button>
`;
//add see more event to get more items from the button click
function seeMore() {
//append data to HTML
document.querySelector("#data-list").innerHTML += chunks[currentChunkIndex].map(getFriendAndFamilyData).join("");
currentChunkIndex += 1;
const seeMoreButton = document.querySelector("#see-more-button");
//no more chunks to get
if(currentChunkIndex === chunks.length - 1) {
seeMoreButton.parentNode.removeChild(seeMoreButton)
return
}
//Update how many more on see more button
seeMoreButton.innerHTML = `See more ${friendAndFamily.length - (currentChunkIndex + 1)*chunkLength}`
}
<div id="rmFriendsAndRelativesContent"></div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句