[英]How to split all element li to show 10 after click next hide prev 10 and show new jquery
Hi all i work with quiz module,大家好,我使用测验模块,
So the issues are, I have dynamically generated data from an array, this is the data i present to the view, this is working good.所以问题是,我从数组动态生成了数据,这是我呈现给视图的数据,这很好用。
I have left tabs, which are built and depends on the length of the questions.我留下了选项卡,这些选项卡是根据问题的长度构建的。
So I need to show in the page first 10 tabs with questions, these are done.所以我需要在页面中显示前 10 个带有问题的选项卡,这些都完成了。
When I press the button Next question it's going to next question, but in case if questions more the 10, it's not to change view to next 10 , in case if I change view manually use button ">" it's showing new view, but when i press button Next question it's starting from the beginning =(当我按下按钮下一个问题时,它将转到下一个问题,但如果问题超过 10,则不会将视图更改为下一个 10 ,如果我手动更改视图,请使用“>”按钮显示新视图,但是当我按下按钮下一个问题是从头开始=(
with this function i sort the li
element in page:使用此功能,我对页面中的
li
元素进行排序:
function sortTabs() {
var $lis = $("#left-tabs li").hide();
$lis.slice(0, 10).show();
var size_li = $lis.length;
var x = 10,
start = 0;
console.log(start, x , size_li)
$('.nex-ten').click(function () {
if (start + x < size_li) {
$lis.slice(start, start + x).hide();
start += x;
$lis.slice(start, start + x).show();
}
});
$('.prev-ten').click(function () {
if (start - x >= 0) {
$lis.slice(start, start + x).hide();
start -= x;
$lis.slice(start, start + x).show();
}
});
}
Instead of building such a complex view and then working with it.而不是构建如此复杂的视图然后使用它。 You can play with data.
你可以玩数据。 Since you are showing only 10 data at a time.
由于您一次只显示 10 个数据。 You can just build only 10 rows at a time.
您一次只能构建 10 行。 It will optimize your UI too.
它也会优化您的用户界面。 Else system dies.
否则系统死机。 Here are some sample methods.
以下是一些示例方法。 You can optimize it accordingly.
您可以相应地对其进行优化。
Find the update code pen:找到更新码笔:
https://codepen.io/deepakshrma/pen/jOPWbKW https://codepen.io/deepakshrma/pen/jOPWbKW
Smaple:枫木:
const onNext = () => {
pageInfo.curr = pageInfo.curr + 1;
if (pageInfo.curr >= pageInfo.limit) {
pageInfo.page = pageInfo.page + 1;
pageInfo.curr = pageInfo.curr - 10;
if (pageInfo.page > PAGE_COUNT) {
pageInfo.page = 0;
pageInfo.curr = 0;
}
}
console.log(pageInfo);
};
// app.js // app.js
var allQuestions = [ { question: 'Who said, "My real father lost his head at Kings Landing. I made a choice, and I chose wrong."', choices: [ "Robb Stark", "Jon Snow", "Theon Greyjoy", "Arya Stark", "Arya Stark", "Arya Stark", "Arya Stark" ], answer: "Jon Snow", image: "https://www.w3schools.com/howto/img_mountains.jpg" }, { question: "What does Valar Morghulis mean?", choices: [ "All men must die", "What is dead may never die", "Never say never", "All men must first live", "Robb Stark", "Jon Snow", "Theon Greyjoy" ], answer: "All men must die", image: "https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" }, { question: "Which GOT character played Hermoine Granger's mom in Harry Potter?", choices: ["Melisandre", "Alerie Tyrell"], answer: "Melisandre", image: "https://media.gettyimages.com/photos/beautiful-book-picture-id865109088?s=612x612" }, { question: 'Who said, "You knelt as boys, now rise as men of the Nights Watch."?', choices: [ "Maester Aemon", "Eddard Stark", "Jeor Mormont", "Alliser Thorne" ], answer: "Maester Aemon", image: "https://tinypng.com/images/social/website.jpg" }, { question: "What is Daenerys Targaryens brothers name?", choices: ["Varys", "Viserys", "Aerys", "Aegon"], answer: 1, image: "" }, { question: "What is a big fear of the Dothraki?", choices: ["Fire", "Salt water", "Heavy stone", "Crows"], answer: 1, image: "" }, { question: "How many swords make up the Iron Throne?", choices: ["500", "1000", "2000", "5000"], answer: 1, image: "" }, { question: "What were Jon Arryn's final words?", choices: [ "Winter is coming", "Beware of the white walkers", "The seed is strong", "Beware the dwarf" ], answer: 2, image: "" }, { question: "Who built the Iron Throne?", choices: [ "Aerys the Mad King", "Aegon The Unlikely", "Aegon the Conqueror", "Aegon the Destroyer" ], answer: 2, image: "" }, { question: "Which knight takes a lance through the neck while jousting?", choices: [ "Ser Hugh of the Vale", "Ser Barristan Selmy", "Ser Ilyn Payne", "Ser Gregor Clegane" ], answer: 0, image: "" }, { question: "What does Valar Morghulis mean?", choices: [ "All men must die", "What is dead may never die", "Never say never", "All men must first live", "Robb Stark", "Jon Snow", "Theon Greyjoy" ], answer: "All men must die", image: "https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" }, { question: "Which GOT character played Hermoine Granger's mom in Harry Potter?", choices: ["Melisandre", "Alerie Tyrell"], answer: "Melisandre", image: "https://media.gettyimages.com/photos/beautiful-book-picture-id865109088?s=612x612" }, { question: 'Who said, "You knelt as boys, now rise as men of the Nights Watch."?', choices: [ "Maester Aemon", "Eddard Stark", "Jeor Mormont", "Alliser Thorne" ], answer: "Maester Aemon", image: "https://tinypng.com/images/social/website.jpg" }, { question: "What does Valar Morghulis mean?", choices: [ "All men must die", "What is dead may never die", "Never say never", "All men must first live", "Robb Stark", "Jon Snow", "Theon Greyjoy" ], answer: "All men must die", image: "https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" }, { question: "Which GOT character played Hermoine Granger's mom in Harry Potter?", choices: ["Melisandre", "Alerie Tyrell"], answer: "Melisandre", image: "https://media.gettyimages.com/photos/beautiful-book-picture-id865109088?s=612x612" }, { question: 'Who said, "You knelt as boys, now rise as men of the Nights Watch."?', choices: [ "Maester Aemon", "Eddard Stark", "Jeor Mormont", "Alliser Thorne" ], answer: "Maester Aemon", image: "https://tinypng.com/images/social/website.jpg" }, { question: "Who built the Iron Throne?", choices: [ "Aerys the Mad King", "Aegon The Unlikely", "Aegon the Conqueror", "Aegon the Destroyer" ], answer: 2, image: "" }, { question: "Which knight takes a lance through the neck while jousting?", choices: [ "Ser Hugh of the Vale", "Ser Barristan Selmy", "Ser Ilyn Payne", "Ser Gregor Clegane" ], answer: 0, image: "" }, { question: "What does Valar Morghulis mean?", choices: [ "All men must die", "What is dead may never die", "Never say never", "All men must first live", "Robb Stark", "Jon Snow", "Theon Greyjoy" ], answer: "All men must die", image: "https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" }, { question: "Which GOT character played Hermoine Granger's mom in Harry Potter?", choices: ["Melisandre", "Alerie Tyrell"], answer: "Melisandre", image: "https://media.gettyimages.com/photos/beautiful-book-picture-id865109088?s=612x612" }, { question: 'Who said, "You knelt as boys, now rise as men of the Nights Watch."?', choices: [ "Maester Aemon", "Eddard Stark", "Jeor Mormont", "Alliser Thorne" ], answer: "Maester Aemon", image: "https://tinypng.com/images/social/website.jpg" }, { question: "What does Valar Morghulis mean?", choices: [ "All men must die", "What is dead may never die", "Never say never", "All men must first live", "Robb Stark", "Jon Snow", "Theon Greyjoy" ], answer: "All men must die", image: "https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" }, { question: "Which GOT character played Hermoine Granger's mom in Harry Potter?", choices: ["Melisandre", "Alerie Tyrell"], answer: "Melisandre", image: "https://media.gettyimages.com/photos/beautiful-book-picture-id865109088?s=612x612" }, { question: 'Who said, "You knelt as boys, now rise as men of the Nights Watch."?', choices: [ "Maester Aemon", "Eddard Stark", "Jeor Mormont", "Alliser Thorne" ], answer: "Maester Aemon", image: "https://tinypng.com/images/social/website.jpg" }, { question: "Who built the Iron Throne?", choices: [ "Aerys the Mad King", "Aegon The Unlikely", "Aegon the Conqueror", "Aegon the Destroyer" ], answer: 2, image: "" }, { question: "Which knight takes a lance through the neck while jousting?", choices: [ "Ser Hugh of the Vale", "Ser Barristan Selmy", "Ser Ilyn Payne", "Ser Gregor Clegane" ], answer: 0, image: "" }, { question: "What does Valar Morghulis mean?", choices: [ "All men must die", "What is dead may never die", "Never say never", "All men must first live", "Robb Stark", "Jon Snow", "Theon Greyjoy" ], answer: "All men must die", image: "https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" }, { question: "Which GOT character played Hermoine Granger's mom in Harry Potter?", choices: ["Melisandre", "Alerie Tyrell"], answer: "Melisandre", image: "https://media.gettyimages.com/photos/beautiful-book-picture-id865109088?s=612x612" }, { question: 'Who said, "You knelt as boys, now rise as men of the Nights Watch."?', choices: [ "Maester Aemon", "Eddard Stark", "Jeor Mormont", "Alliser Thorne" ], answer: "Maester Aemon", image: "https://tinypng.com/images/social/website.jpg" }, { question: "What does Valar Morghulis mean?", choices: [ "All men must die", "What is dead may never die", "Never say never", "All men must first live", "Robb Stark", "Jon Snow", "Theon Greyjoy" ], answer: "All men must die", image: "https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" }, { question: "Which GOT character played Hermoine Granger's mom in Harry Potter?", choices: ["Melisandre", "Alerie Tyrell"], answer: "Melisandre", image: "https://media.gettyimages.com/photos/beautiful-book-picture-id865109088?s=612x612" }, { question: 'Who said, "You knelt as boys, now rise as men of the Nights Watch."?', choices: [ "Maester Aemon", "Eddard Stark", "Jeor Mormont", "Alliser Thorne" ], answer: "Maester Aemon", image: "https://tinypng.com/images/social/website.jpg" }, { question: "Who built the Iron Throne?", choices: [ "Aerys the Mad King", "Aegon The Unlikely", "Aegon the Conqueror", "Aegon the Destroyer" ], answer: 2, image: "" }, { question: "Which knight takes a lance through the neck while jousting?", choices: [ "Ser Hugh of the Vale", "Ser Barristan Selmy", "Ser Ilyn Payne", "Ser Gregor Clegane" ], answer: 0, image: "" }, { question: "What does Valar Morghulis mean?", choices: [ "All men must die", "What is dead may never die", "Never say never", "All men must first live", "Robb Stark", "Jon Snow", "Theon Greyjoy" ], answer: "All men must die", image: "https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" }, { question: "Which GOT character played Hermoine Granger's mom in Harry Potter?", choices: ["Melisandre", "Alerie Tyrell"], answer: "Melisandre", image: "https://media.gettyimages.com/photos/beautiful-book-picture-id865109088?s=612x612" }, { question: 'Who said, "You knelt as boys, now rise as men of the Nights Watch."?', choices: [ "Maester Aemon", "Eddard Stark", "Jeor Mormont", "Alliser Thorne" ], answer: "Maester Aemon", image: "https://tinypng.com/images/social/website.jpg" }, { question: "What does Valar Morghulis mean?", choices: [ "All men must die", "What is dead may never die", "Never say never", "All men must first live", "Robb Stark", "Jon Snow", "Theon Greyjoy" ], answer: "All men must die", image: "https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" }, { question: "Which GOT character played Hermoine Granger's mom in Harry Potter?", choices: ["Melisandre", "Alerie Tyrell"], answer: "Melisandre", image: "https://media.gettyimages.com/photos/beautiful-book-picture-id865109088?s=612x612" }, { question: 'Who said, "You knelt as boys, now rise as men of the Nights Watch."?', choices: [ "Maester Aemon", "Eddard Stark", "Jeor Mormont", "Alliser Thorne" ], answer: "Maester Aemon", image: "https://tinypng.com/images/social/website.jpg" } ]; let pageInfo = { curr: 0, page: 0, limit: 10, total: allQuestions.length }; const PAGE_COUNT = Math.round(pageInfo.total / pageInfo.limit - 1); const onNext = () => { pageInfo.curr = pageInfo.curr + 1; if (pageInfo.curr >= pageInfo.limit) { pageInfo.page = pageInfo.page + 1; pageInfo.curr = pageInfo.curr - 10; if (pageInfo.page > PAGE_COUNT) { pageInfo.page = 0; pageInfo.curr = 0; } } console.log(pageInfo); }; const onPrev = () => { pageInfo.curr = pageInfo.curr - 1; if (pageInfo.curr < 0) { pageInfo.curr = pageInfo.limit - 1; pageInfo.page = pageInfo.page - 1; if (pageInfo.page < 0) { pageInfo.page = PAGE_COUNT; } } console.log(pageInfo); }; const onPageNext = () => { pageInfo.page = pageInfo.page + 1; if (pageInfo.page > PAGE_COUNT) { pageInfo.page = 0; pageInfo.curr = 0; } console.log(pageInfo); }; const onPagePrev = () => { pageInfo.page = pageInfo.page - 1; if (pageInfo.page < 0) { pageInfo.page = PAGE_COUNT; } console.log(pageInfo); }; const fetctData = () => { const curr = pageInfo.page * pageInfo.limit; return allQuestions.slice(curr, curr + 10); }; onNext(); console.log(pageInfo); onPrev(); console.log(pageInfo); onNext(); onNext(); onNext(); onNext(); onNext(); console.log(pageInfo); onNext(); onNext(); console.log(pageInfo); onNext(); console.log(pageInfo, fetctData()); onPageNext(); console.log(pageInfo, fetctData()); onPagePrev(); console.log(pageInfo, fetctData());
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.