目前我正在使用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,以便显示每列中的前两项,然后在点击加载更多按钮时加载下两项?