Question

我在jQuery中使用分页和字母过滤器。它工作正常，但我想再添加一个链接（全部），当用户点击该链接时，它将显示所有数据。

这里的JS代码：

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

    var itemsNumber = 10;
    var min = 0;
    var max = itemsNumber;

    function pagination(action) {
        var totalItems = $("#item-wrapper").find("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;
            }
        }
        else {
        }
        $("#item-wrapper").find("li").hide();
        $("#item-wrapper").find("li").slice(min, max).show();

        if (action == "next"){
         if (max < totalItems)
             {
               $("#prev").removeClass("previous_link_gray");
               $("#prev").addClass("previous_link");
             }
             else
             {
                $("#next").removeClass("next_link");
                $("#next").addClass("next_link_gray");
             }
        }

        if (action == "prev"){
                 if (min>0)
                     {
                       $("#next").removeClass("next_link_gray");
                       $("#next").addClass("next_link");
                     }
                     else
                     {
                       $("#prev").removeClass("previous_link");
                       $("#prev").addClass("previous_link_gray");
                     }
                }
                var mymax = max;
                if(parseInt(max) > parseInt(totalItems)) {
                    mymax = totalItems;
                }

                var pagelbl = (parseInt(min) + 1) + ' to ' + mymax + ' of ' + totalItems;
                $("#spnpage").html(pagelbl);
            }

    pagination();

    //Next
    $("#next").click(function () {
        action = "next";
        pagination(action);

    })

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

function getSelected(Alphabet)  {
    $(".filter").find('a').removeClass('Selected');
    $("#" + Alphabet).addClass('Selected');
    $("#prev").removeClass("previous_link_gray");
    $("#next").removeClass("next_link_gray");
    $("#prev").addClass("previous_link");
    $("#next").addClass("next_link");
}

HTML：

<li><a href="#category-a11" id="all" onclick="getSelected('All')" class="Selected">All</a></li>
<li><a href="#category-A" id="A" onclick="getSelected('A')">A</a></li>
<li><a href="#category-B" id="B" onclick="getSelected('B')">B</a></li>

Answer 1

您可能需要提供更多的html，但您似乎只需要show() #item-wrapper $("#item-wrapper").find("li").show(); // A slightly more process efficient way of selecting would be $("#item-wrapper li").show();中的所有列表项，例如。

getSelected

所以你的function getSelected(Alphabet){ if(Alphabet == "all"){ // Hide prev/next btns as they wont make sense to user $("#prev, #next").hide(); // Show the items $("#item-wrapper li").show(); }else{ $(".filter").find('a').removeClass('Selected'); $("#" + Alphabet).addClass('Selected'); $("#prev").show().removeClass("previous_link_gray"); $("#next").show().removeClass("next_link_gray"); $("#prev").addClass("previous_link"); $("#next").addClass("next_link"); } }函数会变成：

{{1}}

这对您当前的标记有意义吗？

分页和alphabatic过滤器问题

1 个答案: