jquery - 加载更多按钮应该消失

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 

Updated Fiddle

根据要求进行编辑

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

Latest Fiddle Without hardcoding the length