Question

 $('#loadMore').click(function () {

点击#loadMore时，我想显示下一个5 <li>并隐藏已经在那里显示的前5 <li>。

例如，当我点击第一次加载时

一个 - （隐藏）
二 - （隐藏）
三（隐藏）
四（隐藏）
五元（隐藏）

和

六 - （显示）
七 - （显示）
八 - （显示）
九 - （表演）
十 - （显示）

我试图修复代码，但没有什么问题。一旦隐藏但随后它会立即显示所有元素。

这是我的JS代码的示例。并且请更喜欢小提琴

$(document).ready(function () {
    size_li = $("#myList li").size();
    x=5;
    $('#myList li:lt('+x+')').show();
    $('#loadMore').click(function () {
          $('#myList li').hide(500);
            x= (x+5 <= size_li) ? x+5 : size_li;
                $('#myList li:lt('+x+')').show(500);
            $('#showLess').show();
        if(x == size_li){
            $('#loadMore').hide();
        }
    });
    $('#showLess').click(function () {
                $('#myList li').show(500);
        x=(x-5<0) ? 3 : x-5;
        $('#myList li').not(':lt('+x+')').hide(500);
        $('#loadMore').show();
         $('#showLess').show();
        if(x == 3){
            $('#showLess').hide();
        }
    });
});

在这里小提琴：http://jsfiddle.net/6FzSb/4460/

Answer 1

检查this fiddle。希望这是你想要的。

使用下面的切片功能更改了代码。

var pageSize = 5;
var currentPage = 1;
var total = 0;
$(document).ready(function() {
total = $("#myList li").size();
$('#myList li:lt(' + pageSize + ')').show(500);

$('#loadMore').click(function() {
    if (total <= pageSize * (currentPage + 1)) {
        $("#loadMore").hide(500);
    }

    $("#myList li").hide(500);

    currentPage++;

    $("#myList li").slice(pageSize * (currentPage - 1), pageSize * currentPage).show(500);

    $("#showLess").show();
});
$('#showLess').click(function() {

    if (currentPage == 2) {
        $("#showLess").hide();
    }
    $("#myList li").hide(500);
    currentPage--;

    $("#myList li").slice(pageSize * (currentPage - 1), pageSize * currentPage).show(500);
    $("#loadMore").show();
});
});

Answer 2

目前还不清楚你想要发生什么。也许你可以更新你的问题以澄清。

但是我认为以下内容会做你想要的。我已移除hide活动中的#showMore来电以及show活动中的#showLess来电。

$(document).ready(function () {
    var size_li = $("#myList li").size();
    var x=5;
    $('#myList li:lt('+x+')').show();
    $('#loadMore').click(function () {
        x= (x+5 <= size_li) ? x+5 : size_li;
        $('#myList li:lt('+x+')').show(500);
        $('#showLess').show();
        if(x == size_li){
            $('#loadMore').hide();
        }
    });
    $('#showLess').click(function () {
        x=(x-5<=0) ? 3 : x-5; /* Changed to <= so there are never 0 records */
        $('#myList li').not(':lt('+x+')').hide(500);
        $('#loadMore').show();
        $('#showLess').show();
        if(x == 3){
            $('#showLess').hide();
        }
    });
});

无序列表显示下一个并隐藏上一个 - JS修复

2 个答案: