Javascript 单击next按钮时显示前5个子元素并隐藏它们，然后使用jquery显示next 5

所以我想做的是，根据用户有多少段落，页面只显示前5段。如果单击“下一步”，它将隐藏前5段并显示下5段。。。诸如此类

到目前为止，我的工作似乎有些正确。唯一的问题是，当我到达段落末尾时，我不再需要单击“上一步”按钮返回

<div id="container">

<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>14</p>
<p>15</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>20</p>


<button class="prev" disabled="disabled">Prev</button>
<button class="next">Next </button>

$('#container p:gt(4)').hide();

$('.prev').click(function() {
    var first = $('#container').children('p:visible:first');
    first.prevAll(':lt(5)').show();

    if(first.prevAll().length < 6){
          $('.prev').attr('disabled', false); 
    }

    first.prev().nextAll().hide();
    $('.next').show();

});

$('.next').click(function() {
    var last = $('#container').children('p:visible:last');
    last.nextAll(':lt(5)').show();

    if(last.nextAll().length < 6){ 
         $('.next').attr('disabled', false);
    }

    $('.prev').show(); 
    last.next().prevAll().hide(); 


});

一,

二,

三,

四,

五,

六,

七,

八,

九,

十,

十一,

十二,

十三,

十四,

十五

十,

十一,

十二,

十三,

二十

上
下一个
$（“#容器p:gt（4）”.hide（）；
$（'.prev'）。单击（函数（）{
var first=$（“#container”）.children（'p:visible:first'）；
first.prevAll（':lt（5）'）.show（）；
if（first.prevAll（）.length<6）{
$（'.prev'）.attr（'disabled'，false）；
}
first.prev（）.nextAll（）.hide（）；
$（'.next'）.show（）；
});
$（'.next'）。单击（函数（）{
var last=$（“#container”）.children（'p:visible:last'）；
last.nextAll（':lt（5）'）.show（）；
如果（last.nextAll（）.length<6）{
$（'.next'）.attr（'disabled'，false）；
}
$（'.prev'）.show（）；
last.next（）.prevAll（）.hide（）；
});

在这里查看我的JFIDLE，并检查我做错了什么

---

谢谢，

这是一把更新过的小提琴，已更正

你有一些问题。首先，您错误地启用/禁用了按钮（将它们设置为false，而它们本应为true）。当需要时，您没有切换相反按钮的启用状态

主要问题是您的

nextall

和

prevall

需要为

p

标签设置一个选择器，因为它们拾取按钮元素并中断导航

if(last.nextAll('p').length < 6){ ... }

if（last.nextAll（'p'）.length<6）{…}

启用反向按钮不应是确定是否已到达终点的if语句的一部分，而应在其外部。如果您多次按“下一步”，您应该能够按“上一步”，反之亦然：。工作正常。谢谢大家。：）