Как разделить все элементы li, чтобы показать 10 после того, как щелкнул следующий спрятать пред 10 и показать новый jquery

Question

Привет всем, я работаю с модулем викторины,

Итак, проблемы в том, что я динамически сгенерировал данные из массива, это те данные, которые я представляю представлению, это работает хорошо.

Я оставил вкладки, которые построены и зависят от длины вопросов.

Поэтому мне нужно показать на странице первые 10 вкладок с вопросами, это сделано.

Когда Я нажимаю кнопку Следующий вопрос , он переходит к следующему вопросу, но в случае, если вопросы больше 10, не следует изменять вид на следующие 10 , в случае, если я изменяю вид вручную, используйте button ">" показывает новый вид, но когда я нажимаю кнопку Следующий вопрос начинается с начала = (

с помощью этой функции я сортирую 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

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

// приложение. 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());