2017-02-21 94 views
1

我需要创建一个库。我有从01到09的图像。我需要按照foreach进行划分。第一个div必须有一个活动的类。我们需要每隔3张图片重复一次div。我需要这个html:PHP foreach循环每3个循环内爆

  <div class="item active"> 
       <div class="row"> 
        <div class="col-sm-4"> 
         <div class="col-item"> 
          <div class="photo"> 
           <img src="01.jpg" class="img-responsive" alt="a" /> 
          </div> 
         </div> 
        </div> 
        <div class="col-sm-4"> 
         <div class="col-item"> 
          <div class="photo"> 
           <img src="02.jpg" class="img-responsive" alt="a" /> 
          </div> 
         </div> 
        </div> 
        <div class="col-sm-4"> 
         <div class="col-item"> 
          <div class="photo"> 
           <img src="03.jpg" class="img-responsive" alt="a" /> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 


      ... 


      <div class="item"> 
       <div class="row"> 
        <div class="col-sm-4"> 
         <div class="col-item"> 
          <div class="photo"> 
           <img src="07.jpg" class="img-responsive" alt="a" /> 
          </div> 
         </div> 
        </div> 
        <div class="col-sm-4"> 
         <div class="col-item"> 
          <div class="photo"> 
           <img src="08.jpg" class="img-responsive" alt="a" /> 
          </div> 
         </div> 
        </div> 
        <div class="col-sm-4"> 
         <div class="col-item"> 
          <div class="photo"> 
           <img src="09.jpg" class="img-responsive" alt="a" /> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 

但我的代码不起作用。我不知道如何完成这个... 这里是我的PHP代码:

<div id="carousel-example-generic" class="carousel slide hidden-xs" data-ride="carousel"> 
     <!-- Wrapper for slides --> 
     <div class="carousel-inner"> 
      <?php 
      $countedimage = 0; 
      $counteddiv = 0; 
      $count = count($images_bottom); 
      for ($x = 0; $x <= $count; $x++) { 
       $countedimage++; 
       $counteddiv++; 
       if($countedimage == '4') { 
        $countedimage = 0; 
       ?> 
      <div class="item<?php if($counteddiv != '1') { ?> active<?php } ?>"> 
       <div class="row"> 
        <div class="col-sm-4"> 
         <div class="col-item"> 
          <div class="photo"> 
           <img src="<?php echo $images_bottom[$x]['popup']; ?>" class="img-responsive" alt="a" /> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
       <?php } ?> 
       <?php } ?> 

      </div> 
    </div> 

回答

2

首先,让我们开始将您的图像分成三个倍数。

// An arbitrary list of image file names (used for clarity). 
$images = ['image-1.jpg', 'image-2.jpg', 'image-3.jpg', 'image-4.jpg', 'image-5.jpg', 'image-6.jpg', 'image-7.jpg', 'image-8.jpg', 'image-9.jpg']; 

// Separate images into groups of three. 
$images = array_chunk($images, 3); 

接下来我们需要看看输出。所以以你的HTML为例:

<div id="carousel-example-generic" class="carousel slide hidden-xs" data-ride="carousel"> 
    <div class="carousel-inner"> 
     <?php // Loop over each group of three images ?> 
     <?php foreach ($images as $g => $group): ?> 

      <div class="item <?= ($g == 0) ? 'active' : '' ?>"> 
       <div class="row"> 
        <?php // Loop over each image in group ?> 
        <?php foreach ($group as $i => $image): ?> 

         <div class="col-sm-4"> 
          <div class="col-item"> 
           <div class="photo"> 
            <img src="<?= $image ?>" class="img-responsive" alt="a" /> 
           </div> 
          </div> 
         </div> 

        <?php endforeach ?> 
       </div> 
      </div> 
     </div> 

     <?php endforeach ?> 
    </div> 
</div> 
+0

是的,将它们分块在一起,使得代码更加简单...! – BizzyBob

1

所以,你基本上要打印每一个项目这一部分:

<div class="col-sm-4"> 
    <div class="col-item"> 
     <div class="photo"> 
      <img src="<?php echo $src ?>" class="img-responsive" alt="a"/> 
     </div> 
    </div> 
</div> 

而你只想要打印此部分每3时,围绕上述块3组:

<div class="item active"> 
    <div class="row"> 


    </div> 
</div> 

,而不是试图保持的2个独立的计数的轨道,你在做什么,你可以通过使用m事情简单化嗅觉运算符%以及您的循环索引$x

当您想要在特定时间间隔重复某些操作时,这非常有用。从本质上讲,你可以做这样的事情重复的东西每$z次数:

if($totalCount % $z == 0) 

例子:

for ($x = 1; $x < 50; $x++) { 
    if ($x % 5 == 0) echo $x . '<br>'; 
} 

// results: 
// 5 
// 10 
// 15 
// 20 
// 25 
// 30 
// 35 
// 40 
// 45 

在你的情况下,像这样的工作:

<?php for ($x = 0; $x < count($images_bottom); $x++) { 
    $src = $images_bottom[$x]['popup']; 
    $item_active = $x==0 ? 'item active' : 'item'; // only use 'item active' first one 

if ($x % 3 == 0) { // only display every 3rd time?> 
    <div class="<?php echo $item_active ?>"> 
     <div class="row"> 
<?php } ?> 
      <div class="col-sm-4"> 
       <div class="col-item"> 
        <div class="photo"> 
         <img src="<?php echo $src ?>" class="img-responsive" alt="a"/> 
        </div> 
       </div> 
      </div> 
<?php if ($x % 3 == 2 || $x == count($images_bottom)-1){ // only display after every 3rd time (after items 0, 1, 2) or on last one ?> 
     </div> 
    </div><?php } ?> 

<?php } ?>