2

こんにちは、助けてくれてありがとう。クラスごとにliを非表示にして、フィルタリングする単純なページネーションを実装しようとしています。例はこちらです。私はこれが初めてですが、いくつかの助けを借りて、主なアイデアが機能しています。唯一の問題は、クリックしてフィルターをかけると、そのカテゴリの li だけをページ分けしたいということです。したがって、「カテゴリ 1」リンクをクリックすると、「カテゴリ 2」クラスの li は非表示になり、次または前をクリックしても表示されません。

HTML

<div class="filter">
    <a href="#category-1">category 1</a>
    <a href="#category-2">category 2</a>
</div>

<div id="item-wrapper">
<ul class="items">
    <li class="category-1">item 1</li>
    <li class="category-1">item 2</li>
    <li class="category-1">item 3</li>
    <li class="category-1">item 4</li>
    <li class="category-1">item 5</li>
    <li class="category-1">item 6</li>
    <li class="category-2">item 7</li>
    <li class="category-2">item 8</li>
    <li class="category-2">item 9</li>
    <li class="category-2">item 10</li>
    <li class="category-2">item 11</li>
    <li class="category-2">item 12</li>
    <li class="category-1">item 13</li>
    <li class="category-1">item 14</li>
    <li class="category-2">item 15</li>
</ul>

<div class="ctrl-nav">
<a href="#" id="prev">Previous</a><a href="#" id="next">Next</a>
</div>
</div>

JS

$('div.filter').delegate('a', 'click', function (event) {
  $('ul.items li').hide().filter('.' + this.href.slice(this.href.indexOf("#") + 1)).show();

  event.preventDefault();
});


var itemsNumber = 6;
var min = 0;
var max = itemsNumber;

function pagination(action) {

    var totalItems = $("li").length;

    if (max < totalItems) {//Stop action if max reaches more than total items 
        if (action == "next") {

            min = min + itemsNumber;
            max = max + itemsNumber;

        }
    }

    if (min > 0) {//Stop action if min reaches less than 0
        if (action == "prev") {

            min = min - itemsNumber;
            max = max - itemsNumber;

        }
    }

    $("li").hide();
    $("li").slice(min, max).show();

}

pagination();


//Next
$("#next").click(function() {

    action = "next";
    pagination(action);

})

//Previous
$("#prev").click(function() {
    action = "prev";
    pagination(action);

})

どんな助けでもいいでしょう:)

4

1 に答える 1

4

スクリプトを更新しました：http：//jsfiddle.net/vU9Hv/12/

visible基本的に、選択したliクラスを含む新しい変数を導入して表示しました。次に、pagination関数はsのすべての表示/非表示を処理しますli。その変数はデフォルトで空白に設定されています。したがって、すべてliのが最初に表示されます。関数は次のpaginationように始まります。

var totalItems = $("li" + visible).length;

そして最後に：

$("li" + visible).slice(min, max).show();

クリックハンドラーが次のように変換されている間：

$('div.filter').delegate('a', 'click', function (event) {
    visible = '.' + this.href.slice(this.href.indexOf("#") + 1);
    pagination();
    event.preventDefault();
});
于 2012-06-14T02:28:51.167 に答える