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

这里有一个更新的小提琴，经过修正。 http://jsfiddle.net/h8G7t/1/

你有几个问题在继续。首先是你正确地启用/禁用你的按钮（将它们设置为假，当它们应该是真的时）。并且在需要时你没有切换相反按钮的启用状态。

主要问题是您的nextall和prevall需要有p代码的选择器，因为他们正在拿起按钮元素并打破导航。

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

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

1 个答案: