jquery - 从页面中删除不需要的空间

Question

我在这个网站上使用自定义模板使用高级自定义归档插件的所有可能性 MY Site 我已经创建了一些自定义字段并使用以下代码调用了字段值。

<div class="category-images"><?php echo get_field( "category_heading_1" ); ?></div>
<div class="images">
<?php 

$image1 = get_field('image_1'); 
$image2 = get_field('image_2');
$image3 = get_field('image_3');
$image4 = get_field('image_4');
$image5 = get_field('image_5');
$image6 = get_field('image_6');
$image7 = get_field('image_7');
$image8 = get_field('image_8');
$image9 = get_field('image_9');
?>

<div class="img1"><a href="<?php echo get_field( "image_link_1" ); ?>"><img src="<?php echo $image1['url']; ?>" /></a></div>
<div class="img1"><a href="<?php echo get_field( "image_link_2" ); ?>"><img src="<?php echo $image2['url']; ?>" /></a></div>
<div class="img1"><a href="<?php echo get_field( "image_link_3" ); ?>"><img src="<?php echo $image3['url']; ?>" /></a></div>
</div>
  <div class="images_txt">
    <div class="img_txt"><b><?php echo get_field( "image_heading_1" ); ?></b> </div>
    <div class="img_txt1"><b><?php echo get_field( "image_heading_2" ); ?></b> </div>
    <div class="img_txt2"><b><?php echo get_field( "image_heading_3" ); ?></b> </div>
</div> 
<div class="images">
<div class="img1"><a href="<?php echo get_field( "image_link_4" ); ?>"><img src="<?php echo $image4['url']; ?>" /></a></div>
<div class="img1"><a href="<?php echo get_field( "image_link_5" ); ?>"><img src="<?php echo $image5['url']; ?>" /></a></div>
<div class="img1"><a href="<?php echo get_field( "image_link_6" ); ?>"><img src="<?php echo $image6['url']; ?>" /></a></div>
</div>
<div class="images_txt"> 
 <div class="img_txt"><b><?php echo get_field( "image_heading_4" ); ?> </b></div>
   <div class="img_txt1"><b><?php echo get_field( "image_heading_5" ); ?> </b></div>
   <div class="img_txt2"><b><?php echo get_field( "image_heading_6" ); ?> </b></div>
</div> 
<div class="images">
<div class="img1"><a href="<?php echo get_field( "image_link_7" ); ?>"><img src="<?php echo $image7['url']; ?>" /></a></div>
<div class="img1"><a href="<?php echo get_field( "image_link_8" ); ?>"><img src="<?php echo $image8['url']; ?>" /></a></div>
<div class="img1"><a href="<?php echo get_field( "image_link_9" ); ?>"><img src="<?php echo $image9['url']; ?>" /></a></div>
</div>
<div class="images_txt">  
<div class="img_txt"><b><?php echo get_field( "image_heading_7" ); ?> </b></div>
  <div class="img_txt1"><b><?php echo get_field( "image_heading_8" ); ?></b> </div>
  <div class="img_txt2"><b><?php echo get_field( "image_heading_9" ); ?></b> </div>
   </div>

   <div class="category-images"><?php echo get_field( "category_heading_2" ); ?></div>
<div class="images">
<?php 

$image_21 = get_field('image_2(1)'); 
$image_22 = get_field('image_2(2)'); 
$image_23 = get_field('image_2(3)'); 
$image_24 = get_field('image_2(4)'); 
$image_25 = get_field('image_2(5)'); 
$image_26 = get_field('image_2(6)'); 
$image_27 = get_field('image_2(7)'); 
$image_28 = get_field('image_2(8)'); 
$image_29 = get_field('image_2(9)'); 

?>

<div class="img1"><a href="<?php echo get_field( "image_link_2(1)" ); ?>"><img src="<?php echo $image_21['url']; ?>" /></a></div>
<div class="img1"><a href="<?php echo get_field( "image_link_2(2)" ); ?>"><img src="<?php echo $image_22['url']; ?>" /></a></div>
<div class="img1"><a href="<?php echo get_field( "image_link_2(3)" ); ?>"><img src="<?php echo $image_23['url']; ?>" /></a></div>
</div>
<div class="images_txt">
<div class="img_txt"><b><?php echo get_field( "image_heading_2(1)" ); ?></b> </div>
<div class="img_txt1"><b><?php echo get_field( "image_heading_2(2)" ); ?></b> </div>
<div class="img_txt2"><b><?php echo get_field( "image_heading_2(3)" ); ?></b> </div>
</div> 
<div class="images">
<div class="img1"><a href="<?php echo get_field( "image_link_2(4)" ); ?>"><img src="<?php echo $image_24['url']; ?>" /></a></div>
<div class="img1"><a href="<?php echo get_field( "image_link_2(5)" ); ?>"><img src="<?php echo $image_25['url']; ?>" /></a></div>
<div class="img1"><a href="<?php echo get_field( "image_link_2(6)" ); ?>"><img src="<?php echo $image_26['url']; ?>" /></a></div>
</div>
<div class="images_txt"> 
 <div class="img_txt"><b><?php echo get_field( "image_heading_2(4)" ); ?> </b></div>
  <div class="img_txt1"><b><?php echo get_field( "image_heading_2(5)" ); ?> </b></div>
  <div class="img_txt2"><b><?php echo get_field( "image_heading_2(6)" ); ?> </b></div>
</div> 
<div class="images">
<div class="img1"><a href="<?php echo get_field( "image_link_2(7)" ); ?>"><img src="<?php echo $image_27['url']; ?>" /></a></div>
<div class="img1"><a href="<?php echo get_field( "image_link_2(8)" ); ?>"><img src="<?php echo $image_28['url']; ?>" /></a></div>
<div class="img1"><a href="<?php echo get_field( "image_link_2(9)" ); ?>"><img src="<?php echo $image_29['url']; ?>" /></a></div>
</div>
<div class="images_txt">  
<div class="img_txt"><b><?php echo get_field( "image_heading_2(7)" ); ?> </b></div>
  <div class="img_txt1"><b><?php echo get_field( "image_heading_2(8)" ); ?></b> </div>
  <div class="img_txt2"><b><?php echo get_field( "image_heading_2(9)" ); ?></b> </div>
   </div>

所以在我的例子中，我只从后端添加了 3 个文件作为自定义文件。我分配了 9 个文件，因为将来可能会添加。因为我只有 3 个产品，当它在前端显示时，页面正在占用空间对于我没有输入的文件。源代码显示每个自定义文件的 div，即使它没有什么可显示的。所以用户向下滚动更多以到达页脚。你可以看到它 HERE .有没有办法在添加 future 图像时自动增加该 div 的高度。请帮忙，谢谢!!

Answer 1

你应该检查 $image1 这样的变量 它返回 first imaged 的​​值 检查 if $image1==NULL or $image1=='' Then do nothing else display image

你可以在这里查看 How to hide "image" custom field if empty下午 http://www.advancedcustomfields.com/resources/functions/get_field/ 这些可能是您的正确答案。

我想这对你有帮助。