加载具有两列布局的更多按钮

时间:2018-04-30 05:39:18

标签: javascript php jquery wordpress

目前我正在使用bootstrap创建,然后使用php动态填充两列

<?php if(have_rows(): ?>
<div class="col-lg-6>
<?php while(have_rows()): the_row; ?>
//load odd rows
<div class="reviews"></div>
<?php endwhile; ?>
</div>
<div class="col-lg-6>
<?php while(have_rows()): the_row; ?>
//load even rows
<div class="reviews"></div>
<?php endwhile; ?>
</div>
<?php endif; ?>
<div id="load" class="submit cta">
    <a href="#">Load More</a>
</div>

然后用javascript我计算奇数和偶数行,只显示前四行。

$(function(){
  $(".reviews").slice(0, 4).show(); // select the first 4
  $("#load").click(function(e){ // click event for load more
     e.preventDefault();
     $(".reviews:hidden").slice(0, 8).show(); // select next 4 hidden divs and show them
     if($(".reviews:hidden").length == 0){ // check if any hidden divs still exist
        $('#load').hide(); // alert if there are none left
     }
  });
});

如何编写javascript,以便显示每列中的前两项,然后在点击加载更多按钮时加载下两项?

0 个答案:

没有答案