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

大家好，我和测验模块一起工作

所以问题是，我已经从一个数组中动态生成了数据，这是我向视图提供的数据，这很好

我留下了一些标签，这些标签是根据问题的长度构建的

所以我需要在页面中显示前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();
        }
    });

}

函数sortTabs（）{
var$lis=$（“#左制表符li”）.hide（）；
$lis.slice（0,10.show（）；
var size_li=$lis.length；
var x=10，
开始=0；
console.log（开始、x、大小）
$（'.nex-ten'）。单击（函数（）{
如果（开始+x<尺寸）{
$lis.slice（start，start+x）.hide（）；
开始+=x；
$lis.slice（start，start+x）.show（）；
}
});
$（'.prev-ten'）。单击（函数（）{
如果（开始-x>=0）{
$lis.slice（start，start+x）.hide（）；
开始-=x；
$lis.slice（start，start+x）.show（）；
}
});
}

而不是构建这样一个复杂的视图，然后使用它。你可以玩数据。因为你一次只显示10个数据。你一次只能构建10行。这也会优化你的UI。否则系统就会死掉。以下是一些示例方法。你可以相应地优化它

查找更新代码笔：

s示例：

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=[
{
问题:
他说：“我的亲生父亲在国王登陆时失去了理智。我做了一个选择，但我选择错了。”，
选择：[
“罗布·斯塔克”，
“乔恩·斯诺”，
“Theon Greyjoy”，
“雅利娅·斯塔克”，
“雅利娅·斯塔克”，
“雅利娅·斯塔克”，
“雅莉亚·斯塔克”
],
回答：“乔恩·斯诺”，
图像：“https://www.w3schools.com/howto/img_mountains.jpg"
},
{
问：“瓦拉尔·莫古利斯是什么意思？”，
选择：[
“人人必死”，
“死的可能永远不会死”，
“永不说永不”，
“所有人都必须先活着”，
“罗布·斯塔克”，
“乔恩·斯诺”，
“席恩·格雷乔伊”
],
回答：“所有人都必须死”，
图片：
"https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
},
{
问题:
“哪个角色在《哈利波特》中扮演了赫敏·格兰杰的妈妈？”，
选择：[“Melisandre”、“Alerie Tyrell”]，
回答：“梅丽珊卓”，
图片：
"https://media.gettyimages.com/photos/beautiful-book-picture-id865109088?s=612x612"
},
{
问题:
“谁说，“你们像孩子一样跪着，现在却像黑夜中的人一样站起来了。”？”，
选择：[
“埃蒙学士”，
“艾达德·斯塔克”，
“Jeor Mormont”，
“Alliser Thorne”
],
回答：“埃蒙大师”，
图像：“https://tinypng.com/images/social/website.jpg"
},
{
问题：“丹妮莉丝·坦格利安兄弟叫什么名字？”，
选择：[“瓦利斯”、“维塞里斯”、“艾利斯”、“埃贡”]，
答:一,，
图像：“
},
{
问题：“多斯拉克人最大的恐惧是什么？”，
选择：[“火”、“盐水”、“重石”、“乌鸦”]，
答:一,，
图像：“
},
{
问：“铁王座上有多少把剑？”，
选择：[“500”、“1000”、“2000”、“5000”]，
答:一,，
图像：“
},
{
问题：“Jon Arryn的最后一句话是什么？”，
选择：[
“冬天来了”，
“当心白人步行者”，
“种子是坚强的”，
“小心侏儒”
],
答:二,，
图像：“
},
{
问题：“谁建造了铁王座？”，
选择：[
“疯狂的国王”，
“不太可能”，
“征服者埃贡”，
“宙斯盾驱逐舰”
],
答:二,，
图像：“
},
{
问：“哪个骑士在格斗时用长矛刺穿脖子？”，
选择：[
“谷之休爵士”，
“巴里斯坦·塞尔米爵士”，
“伊琳·佩恩爵士”，
“格雷戈·克莱甘爵士”
],
答:0,，
图像：“
},
{
问：“瓦拉尔·莫古利斯是什么意思？”，
选择：[
“人人必死”，
“死的可能永远不会死”，
“永不说永不”，
“所有人都必须先活着”，
“罗布·斯塔克”，
“乔恩·斯诺”，
“席恩·格雷乔伊”
],
回答：“所有人都必须死”，
图片：
"https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
},
{
问题:
“哪个角色在《哈利波特》中扮演了赫敏·格兰杰的妈妈？”，
选择：[“Melisandre”、“Alerie Tyrell”]，
回答：“梅丽珊卓”，
图片：
"https://media.gettyimages.com/photos/beautiful-book-picture-id865109088?s=612x612"
},
{
问题:
“谁说，“你们像孩子一样跪着，现在却像黑夜中的人一样站起来了。”？”，
选择：[
“埃蒙学士”，
“艾达德·斯塔克”，
“Jeor Mormont”，
“Alliser Thorne”
],
回答：“埃蒙大师”，
图像：“https://tinypng.com/images/social/website.jpg"
},
{
问：“瓦拉尔·莫古利斯是什么意思？”，
选择：[
“人人必死”，
“死的可能永远不会死”，
“永不说永不”，
“所有人都必须先活着”，
“罗布·斯塔克”，
“乔恩·斯诺”，
“席恩·格雷乔伊”
],
回答：“所有人都必须死”，
图片：
"https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
},
{
问题:
“哪个角色在《哈利波特》中扮演了赫敏·格兰杰的妈妈？”，
选择：[“Melisandre”、“Alerie Tyrell”]，
回答：“梅莉