2017-10-18 119 views
0

我想隐藏”加载更多“按钮,如果没有更多的项目”显示:无“分配给他们我有一个过滤器加载基于游览条件的HTML列表 - 所以列表从不相同隐藏“加载更多:按钮在一个懒惰的负载

例如,如果我只有一个项目,或者我只有4个项目并且没有任何要加载,则加载更多按钮应该被禁用或不可见

我有以下HTML脚本:

jQuery(function ($) { 
 

 
    var tour_block = $(".tour"); 
 

 
    // count elements and find how many have display none 
 
    /* 
 
    var size_li = tour_block.size(); 
 
    alert(size_li); 
 
    */ 
 

 

 
    tour_block.slice(0, 6).show(); 
 

 
    $("#loadMore").on('click', function (e) { alert("dd"); 
 
     e.preventDefault(); 
 

 
     var hidden_tour = $(".tour:hidden"); 
 

 
     hidden_tour.slice(0, 4).slideDown(); 
 
     if (hidden_tour.length == 0) { 
 
      $("#load").fadeOut('slow'); 
 
     } 
 
     $('html,body').animate({ 
 
      scrollTop: $(this).offset().top 
 
     }, 1500); 
 
    }); 
 

 
});
.tour { 
 
    border: 1px solid red; 
 
    display: none; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div class="results"> 
 
    <div class="tour">some tour content</div> 
 
    <div class="tour">some tour content</div> 
 
    <div class="tour">some tour content</div> 
 
    <div class="tour">some tour content</div> 
 
    <div class="tour">some tour content</div> 
 
    <div class="tour">some tour content</div> 
 
    <div class="tour">some tour content</div> 
 
    <div class="tour">some tour content</div> 
 
    <div class="tour">some tour content</div> 
 
    <div class="tour">some tour content</div> 
 
    <div class="tour">some tour content</div> 
 
    <div class="tour">some tour content</div> 
 
    <div class="tour">some tour content</div> 
 
    <div class="tour">some tour content</div> 
 
</div> 
 

 
<a id="loadMore" href="#">Load More Tours</a>

回答

1

添加一个按钮来进行测试:

<button id="test-button">Test Button</button> 

使用该脚本:

$('#test-button').on('click', function() { 

    // Check if there are no hidden values (note ! prefix) 
    // Select all with class 'tour' and filter for hidden items 
    if (!$('.tour:hidden').length) { 
     // Hide button 
     $('#loadMore').hide(); 
    } 

}); 

希望它能帮助。