1

这是仅适用于一组的 jquery prev/next 函数。如果我添加另一个 ul 集，则第二个集不起作用；下一个/上一个不起作用。我知道我需要对脚本代码进行一些更改，以便它可以与尽可能多的 ul 一起使用。

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li>21</li>
</ul>
<a class="prev">prev</a> | <a class="next">next</a>

脚本是：

$('ul li:gt(4)').hide();

$('.prev').click(function() {
    var first = $('ul').children('li:visible:first');
    first.prevAll(':lt(5)').show();
    first.prev().nextAll().hide();
});

$('.next').click(function() {
    var last = $('ul').children('li:visible:last');
    last.nextAll(':lt(5)').show();
    last.next().prevAll().hide();
});
});

并添加 jquery.js 以使其正常工作。现在我想知道如何使上面的这个脚本与许多 ul 和 div 一起工作而不会导致任何问题或错误。

更新＃1： *我想改变下面的代码来适应另一个div和ul（比如我有ul#block1和ul#block2..有没有更好更干净的方法？？ *

 $('ul#block1 li:gt(4)').hide();$('ul#block2 li:gt(4)').hide();

$('.prev').click(function() {
    var first = $('ul#block1').children('li:visible:first');
    var firstz = $('ul#block2').children('li:visible:first');
    first.prevAll(':lt(5)').show();
    first.prev().nextAll().hide();
});

$('.next').click(function() {
    var last = $('ul#block1').children('li:visible:last');
    var lastz = $('ul#block2').children('li:visible:last');
    last.nextAll(':lt(5)').show();
    last.next().prevAll().hide();
});
});
4

1 回答 1

1

我认为您只需要一个标志来帮助脚本确定您要与之交互的分页部分。我选择通过将它们包装在<div>一个通用类中来做到这一点。

<div class="pages">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
  <a class="prev">prev</a> | <a class="next">next</a>
</div>
<div class="pages">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
  <a class="prev">prev</a> | <a class="next">next</a>
</div>

jQ

$('.pages ul').each(function() {
  $(this).children('li:gt(4)').hide();
})

$('.prev').click(function() {
    var first = $(this).parent('.pages').find('ul li:visible:first');
    first.prevAll(':lt(5)').show();
    first.prev().nextAll().hide();
});

$('.next').click(function() {
    var last = $(this).parent('.pages').find('ul li:visible:last');
    last.nextAll(':lt(5)').show();
    last.next().prevAll().hide();
});
于 2013-05-20T14:06:35.813 回答