0

現在、単一のページを生成する HTML があります。どの「製品」を選択したかによって、javascript で挿入された「複数ページ」機能を使用したいと思います。

サンプルコードは次のとおりです。

<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">€&lt;/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">€&lt;/span>22.00</span></p></div>
    </a>
  </div>
.
.
.
</div>

たとえば、ID「product-9」を持つ内部divの「products」divを複数のページに分割したい。それ、どうやったら出来るの？

編集 明確ではないかもしれません。私はたくさんの製品を持っていて、ページごとに9つの製品を表示したいです

4

1 に答える 1

0

これはjQueryを使用した非常に基本的な例です

核心はここにあります：

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

    }
}

より少ないコードでこれを行うために、より複雑なセレクターを使用できますが、jQuery 以外のユーザーが読めるようにシンプルにしています。

基本的にはページサイズから毎回表示する項目を計算しています。簡単にするために、2つに制限しました。CSS には、デフォルトで非表示にするための display:none があります。

ページ番号の上限チェックはありませんが、作成するのはそれほど難しくありません。

于 2013-01-28T13:40:51.597 に答える