具有图像转发器字段的多个 div答案

【问题标题】：Multiple divs with a repeater field of image具有图像转发器字段的多个 div
【发布时间】：2012-10-17 13:39:03
【问题描述】：

我正在尝试使用中继器字段（ACF 插件）的图像显示多个 div。

例如 Div 1 与图像 1 - Div 2 与图像 2 - 等等...

使用此标记：

<div id="project" class="item">
     <a href="#">
        <img src="img/project1.jpg" alt="project1" width="240" height="173">
     </a>
     <div class="art_title">
         <p>SWEET LIFE #1</p>
     </div>
     <div class="mask"></div>
</div>

所以，通过 html 重复它，我显示了所有图像，但现在我将它集成到 wordpress 中，我遇到了以下问题：

我正在使用转发器字段来获取所有图像，因此使用以下代码：

<?php  $slides = get_field('project_thumbnails');  
        // Grabs the array      
       // Check if there is any data in the array before looping
         if($slides) {     
            //we need to close this div
           echo '<div id="project_slider" class="item">';     
           foreach($slides as $s) {  
                  echo '<div class="aimagediv" >'; //adding the start tag of the div
                  echo '<a href="#">';          
                  echo '<img src="'.$s['project_thumb'].'" alt="" />';
                  echo '</a>';
                  echo '</div>'; //CLOSING THE DIV JUST ADDED     
                 }        
                  echo '<div class="art_title">';        
                  echo '<p>SWEET LIFE2</p>';        
                  echo '</div>';        
                  echo '<div class="mask">';        
                  echo '</div>';  

                  echo '</div>'; //closing the first div,not sure if you want this, its optional
             }  

?>  <?php endwhile; // end of the loop. ?>

我得到了中继器的图像，但它全部显示在同一个 div 中，它没有创建新的 div id=¨project"。所以它显示如下：

并且在页面上创建的标记就像所有图像都在同一个 div 中一样。

<div id="project" class="item">
     <a href="#">
        <img src="img/project1.jpg" alt="project1" width="240" height="173">
        <img src="img/project1.jpg" alt="project1" width="240" height="173">
     </a>
     <div class="art_title">
         <p>SWEET LIFE #1</p>
     </div>
     <div class="mask"></div>
</div>

我做错了什么？

【问题讨论】：

标签： php javascript jquery ajax wordpress

【解决方案1】：

<?php  $slides = get_field('project_thumbnails');  
        // Grabs the array      
       // Check if there is any data in the array before looping
         if($slides) {     
            //we need to close this div
           foreach($slides as $s) {  
                  echo '<div id="project_slider" class="item">';     
                  echo '<div class="aimagediv" >'; //adding the start tag of the div
                  echo '<a href="#">';          
                  echo '<img src="'.$s['project_thumb'].'" alt="" />';
                  echo '</a>';
                  echo '</div>'; //CLOSING THE DIV JUST ADDED     
                  echo '<div class="art_title">';        
                  echo '<p>SWEET LIFE2</p>';        
                  echo '</div>';        
                  echo '<div class="mask">';        
                  echo '</div>';  
                  echo '</div>'; //closing the first div,not sure if you want this, its optional
                 }
             }  

?>  <?php endwhile; // end of the loop. ?>

【讨论】：