加载更多按钮应该消失 [英] Load more button should disappear

问题描述

我正在使用一些代码来显示带有加载更多"按钮的内容.一切都很好.但是，引起问题的唯一一件事是在加载所有内容时仍显示加载更多"按钮.我的查询是，加载完所有内容后，加载更多"按钮应该消失.

I am using some code to show content with load more button. Every thing is working fine. But only one thing that is causing problem is Load more button is still showing when all the content is loading. My query is the load more button should disappear when all the contents have been loaded.

用于加载更多按钮的html代码:

html code for load more button:

<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代码:

Jquery code for load more:

$(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").css({"display":"none",});中存在语法错误.在none

You have syntax error in $("#loadMore").css({"display":"none",});. Remove , after 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选择器

To get the number of displayed li use :visible selector

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

最新的小提琴，无需对长度进行硬编码

这篇关于加载更多按钮应该消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！