javascript - 显示前 5 个子元素并在单击下一个按钮时隐藏它们并使用 jquery 显示接下来的 5 个

Question

所以我想做的是，根据用户有多少段落，页面只显示前 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(); 


});

在此处查看我的 jfiddle，并检查我做错了什么。 http://jsfiddle.net/h8G7t/

谢谢，

Answer 1

这是更正后的更新 fiddle 。 http://jsfiddle.net/h8G7t/1/

您遇到了一些问题。首先是您错误地启用/禁用了按钮(将它们设置为 false，而它们本应为 true)。而且您没有在需要时切换对面按钮的启用状态。

主要问题是您的 nextall 和 prevall 需要为 p 标签选择一个选择器，因为它们选择了按钮元素并破坏导航。

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