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

Question

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

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

我有左侧选项卡，这些选项卡是根据问题的长度构建的。

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

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

使用此函数，我对页面中的 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

而不是构建这样一个复杂的 View 然后使用它。你可以玩数据。因为您一次只显示 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());