单击下一个隐藏上一个 10 并显示新的 jquery 后，如何拆分所有元素 li 以显示 10

Question

大家好，我使用测验模块，

所以问题是，我从数组动态生成了数据，这是我呈现给视图的数据，这很好用。

我留下了选项卡，这些选项卡是根据问题的长度构建的。

所以我需要在页面中显示前 10 个带有问题的选项卡，这些都完成了。

当我按下按钮下一个问题时，它将转到下一个问题，但如果问题超过 10，则不会将视图更改为下一个 10 ，如果我手动更改视图，请使用“>”按钮显示新视图，但是当我按下按钮下一个问题是从头开始=（

使用此功能，我对页面中的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();
        }
    });

}

Answer 1

而不是构建如此复杂的视图然后使用它。 你可以玩数据。 由于您一次只显示 10 个数据。 您一次只能构建 10 行。 它也会优化您的用户界面。 否则系统死机。 以下是一些示例方法。 您可以相应地对其进行优化。

找到更新码笔：

https://codepen.io/deepakshrma/pen/jOPWbKW

枫木：

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

 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());