Question

我希望页面仅显示特定li中的前10 ul。在css中： ul＃asd li { 显示：无 } ul＃asd li：nth-child（2）{ 显示：块 } ul＃asd li：nth-child（3）{ 显示：块 }

仅适用于此事。但我希望它在单击“下一步”按钮时按顺序显示下一个10。所以在开始时显示前10，当点击下一个按钮显示10到20 <li>时，它就是这样。如果输入字段可以命令功能输入页码，而下一个''前一个'输入2个按钮，那将是完美的解决方案。我想知道是否有代码强制页面只加载可见内容。谢谢你的回答。

 <ul id="asd">
    <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>
 </ul>

 <button id="prev" onSubmit="">prev</button>
 <input id="page" onSubmit="" />
 <button id="more" onSubmit="">next</button>
 </div>

 <script>
 function showPage(page) {
 var listItems = $("#asd li").toArray();
 var start = (10 * page) - 10; // this is if you use page 1
 // var start = (10 * page) // this is if you use page 0
 var showListItems = listItems.splice(start, 10);

 $(listItems).hide();
 $(showListItems).show();
 }</script>

现在问题是我仍然需要使用CSS来进行格式化，所以我无法调用该函数。

我也找到了http://jsfiddle.net/uXn2p/1/，但它对我没用;它在最后一页到达后继续前进。

Answer 1

您可以编写一个函数来拼接列表项：

function showPage(page) {
    var listItems = $("#asd li").toArray();
    var start = (10 * page) - 10; // this is if you use page 1
    // var start = (10 * page) // this is if you use page 0
    var showListItems = listItems.splice(start, 10);

    $(listItems).hide();
    $(showListItems).show();
}

如果您要跟踪当前页码，则可以使用下一个按钮递增页面，然后调用showPage（页面）。您也可以将此用于之前的页面，或跳转到上一页。

这是Fiddle Demo。这是不完整的，因为您将需要添加逻辑以在没有next / prev时禁用按钮，以及处理跳转到不存在的页面的逻辑。

Ul在开始时仅显示前10个，并且下一个点击显示10-20然后20-30

1 个答案: