使用JavaScript的多个页面

Question

我有HTML，目前只生成一个页面。根据选择的“产品”，我想使用带有javascript的"Multiple“功能。

下面是一些示例代码：

<div id="products">

  <div id="product-1" class="product">
    <a href="/product/marco" title="View marco" class="product-a">
      <span class="stilt"></span>
      <div class="product-info"><h3 class="product-title"><span>marco</span></h3><p class="product-price"><span><span class="currency_sign">€</span>23.00</span></p></div>
    </a>
  </div>

  <div id="product-2" class="product">
    <a href="/product/la-regola-dell-amico" title="View la regola dell'amico" class="product-a">
      <span class="stilt"></span>
      <div class="product-info"><h3 class="product-title"><span>la regola dell'amico</span></h3><p class="product-price"><span><span class="currency_sign">€</span>22.00</span></p></div>
    </a>
  </div>
.
.
.
</div>

例如，我想将"products“div拆分为内部div的多个页面，例如id "product-9”。我该怎么做？

编辑可能不清楚，我有很多产品，我想每页显示9个产品

Answer 1

下面是使用jQuery的一个非常基本的示例

关键在于：

function togglePage(page)
{
    for (var i = 1 ; i < pageSize  + 1; i++)
    {
        $("#product-" + ((page * pageSize) + i)).toggle();

    }
}

您可以使用更复杂的选择器以更少的代码来完成这一任务，但我已经为非jQuery用户提供了简单的阅读能力。

基本上，我是根据页面大小计算每次显示的项目。为了简单起见，我把它限制在两个。CSS有显示:默认情况下没有隐藏在上面。

在页码上没有上限检查，但创建页码并不是非常困难。