Question

这是我的标记：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

免责声明：我对javascript一无所知。

Answer 1

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

从jquery数据中每次点击显示3个项目的最佳方法是什么

1 个答案: