在下面的代码中,我使用PHP代码调用一些图像。
注意:我使用了"Advanced Custom Fields"for Wordpress
<?php
// check if the repeater field has rows of data
if( have_rows('upload-masonry') ):
$i = 0;
// loop through the rows of data
while ( have_rows('upload-masonry') ) : the_row('5');
$i++;
if( $i > 9 )
{
break;
}
?>
<span><img src="<?php the_sub_field('image');?>"></span>
<?
endwhile;
else :
// no rows found
endif;
?>
每次调用将显示9个图像,现在我想再添加9个。但由于我不太擅长jQuery,我不知道如何实现它。以前有人做过吗,可以帮我解决这个问题吗?
$(document).ready(function(){
$("#btn2").click(function(){
$("#grid").append("<span><img src='<?php the_sub_field('image');?>'></span>");
});
});
不要在JS脚本中放入PHP代码。在点击btn2时,您需要对包含您想要加载的"下一组"图像的页面进行ajax调用。您可以使用.append()
通过在dom中附加父元素来将它们添加到现有图像之后。在显示图像的PHP页面上,您可以包含下一个'next' bt2n,该bt2n可以包含一个偏移量参数,以便在每次单击时加载'next set'。
所以你的阅读将是…
http://api.jquery.com/jquery.ajax/http://api.jquery.com/append/如果你正在使用Wordpress,你可能会找到一个插件与你正在寻找的功能。