加載更多按鈕應該會消失

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