加载更多按钮应该消失

Question

我正在使用一些代码来显示加载更多按钮的内容。一切正常。但只有一件事导致问题是加载更多按钮在加载所有内容时仍然显示。我的查询是加载更多内容后，加载更多按钮应该消失。

加载更多按钮的 html 代码：

<div id="loadMore"  class="g-btn type_primary size_big ldm" style="cursor:pointer;  display:none; width: 307px; margin: auto; font-size: 26px;  padding: 10px 0px; ">Load more Content</div>

用于加载更多的 Jquery 代码：

$(document).ready(function () {

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

    if($('#myList li').length > 10) {
  //  $('#loadMore').show();
  $("#loadMore").css({"display":"block",

    });

}

    else {
   // $('#loadMore').hide();
   $("#loadMore").css({"display":"none",

    });
}
});

Answer 1

您在 $("#loadMore").css({"display":"none",});. 删除,后none

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

    if ($('#myList li').length > 10) {
        //  $('#loadMore').show();
        $("#loadMore").css("display", "block");

    } else {
        // $('#loadMore').hide();
        $("#loadMore").css("display", "none");
    }
});

或者简单地使用

$("#loadMore").hide() 和 $("#loadMore").show()

编辑

获取显示li使用:visible选择器的数量

$('#myList li:visible').length 

更新的小提琴

按要求编辑

var count = 5;
$('#myList li:lt(' + count + ')').show();
$('#showLess').hide();
$('#loadMore').click(function () {
    $('#showLess').show();
    count = $('#myList li:visible').length;
    $('#myList li:lt(' + (count + 5) + ')').show();
    if (count + 5 >= $('#myList li').length) {
        $(this).hide();
    }
});
$('#showLess').click(function () {
    $('#loadMore').show();
    count = $('#myList li:visible').length;
    $('#myList li:gt(' + (count - 5) + ')').hide();
    if ((count - 5) <= 5) {
        $(this).hide();
    }
});

最新小提琴没有硬编码长度