什么是最好的方式来显示每次点击从jQuery数据3项

Question

这是我的标记：

 jQuery(document).ready(function( $ ) { var $container = $('#homegrid').masonry({ isAnimated: true, itemSelector: '.home-blocks', columnWidth: '.grid-sizer', percentPosition: true, transitionDuration: '0', visibleStyle: { transform: 'translateY(0)', opacity: 1 }, hiddenStyle: { transform: 'translateY(100px)', opacity: 0 }, }); jQuery('#more').click(function(){ jQuery.get('/pages/ajax', function( data ) { // Make jQuery object from HTML string var $moreBlocks = jQuery( data ); // Append new blocks $container.append( $moreBlocks ); // Have Masonry position new blocks $container.masonry( 'appended', $moreBlocks ); }); }); }); 

 <div class="homegrid-wrap"> <div id="homegrid" class="home-grid"> <div class="grid-sizer"></div> <div class="home-blocks"></div> <div class="home-blocks"></div> <div class="home-blocks"></div> <div class="home-blocks"></div> <div class="home-blocks"></div> <div class="home-blocks"></div> <div class="home-blocks"></div> </div> <button id="more">Load More</button> </div> 

我想做的是计算来自另一个html页面的所有对象，并且每次单击一次显示3个对象，然后在显示所有对象后隐藏“加载更多”按钮。 已经为此工作了几天。 我在使用网格砌体。

免责声明：我对javascript不太了解。

Answer 1

 $('#more').click(function(){debugger; var expanded = $('.block-collapsed').slice(0,3); expanded.show(); expanded.removeClass('block-collapsed'); if($('.block-collapsed').length == 0) { $(this).hide(); } }); 

 .home-blocks { width:100%; background-color:yellow; border-bottom: 1px solid black; } .block-collapsed { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <div class="homegrid-wrap"> <div id="homegrid" class="home-grid"> <div class="grid-sizer"></div> <div class="home-blocks block-collapsed">1</div> <div class="home-blocks block-collapsed">2</div> <div class="home-blocks block-collapsed">3</div> <div class="home-blocks block-collapsed">4</div> <div class="home-blocks block-collapsed">5</div> <div class="home-blocks block-collapsed">6</div> <div class="home-blocks block-collapsed">7</div> </div> <button id="more">Load More</button> </div>