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

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

检查这个小提琴。希望这就是你想要的。

使用切片函数更改了代码，如下所示。

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

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

但是我认为以下内容可以满足您的需求。我删除了#showMore事件中的hide调用和#showLess事件中的show调用。

$(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();
        }
    });
});