显示前5个子元素，并隐藏他们时，next按钮点击和显示下5与jquery

Show first 5 child elements and hide them when next button is clicked and display next 5 with jquery

本文关键字：显示 jquery 按钮 5个 元素 他们 隐藏 next      更新时间：2023-09-26

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

谢谢,

这是一个更新的小提琴，这是更正。http://jsfiddle.net/h8G7t/1/

你有一些问题。首先是你不正确地启用/禁用了按钮(当它们应该为真时，将它们设置为假)。而且你没有在需要时切换相反按钮的启用状态。

主要的问题是，你的nextall和prevall需要有一个选择器的p标签，因为他们拿起按钮元素和破坏导航。

if(last.nextAll('p').length < 6){ ... }
相关文章：