Question

我有一个循环，我想采取这种行为

首先添加项目div然后循环到此div中以添加6个项目并且在完成6个项目之后它将关闭此div并重新开始接下来的六个项目直到完成

我当前的代码如下：

        <?php $x = 0; ?>
      <?php  foreach ($files as $lst) { ?>
        <div class="item <?= ($x == 1 ? 'active' : ''); ?>">
            <div class="row">
            <div class="col-xs-2">
                    <a href="<?= base_url() ?>global/uploads/<?= $lst['FileName'] ?>"
                       rel="prettyPhoto[gallery1]">
                        <?php if ($lst['FileName'] != "" && file_exists(PUBPATH . "global/uploads/" . $lst['FileName'])) { ?>
                            <img src="<?= thumb($lst['FileName'], 150, 150); ?>" class="img-responsive">
                        <?php } else { ?>
                            <img src="<?= base_url() ?>global/site/data/1.jpg" class="img-responsive">
                        <?php } ?>
                    </a>
                </div>
            </div>
            </div>
            <?php $x++;
        } ?>

但我希望最终结构像这样

        <div class="item active">
            <div class="row">
                <div class="col-xs-2">
                    <a href="#"><img src="data/1.jpg" class="img-responsive"></a>
                </div>
                <div class="col-xs-2">
                    <a href="#"><img src="data/1.jpg" class="img-responsive"></a>
                </div>
                <div class="col-xs-2">
                    <a href="#"><img src="data/1.jpg" class="img-responsive"></a>
                </div>
                <div class="col-xs-2">
                    <a href="#"><img src="data/1.jpg" class="img-responsive"></a>
                </div>
                <div class="col-xs-2">
                    <a href="#"><img src="data/1.jpg" class="img-responsive"></a>
                </div>
                <div class="col-xs-2">
                    <a href="#"><img src="data/1.jpg" class="img-responsive"></a>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="row">
                <div class="col-xs-2">
                    <a href="#"><img src="data/1.jpg" class="img-responsive"></a>
                </div>
                <div class="col-xs-2">
                    <a href="#"><img src="data/1.jpg" class="img-responsive"></a>
                </div>
                <div class="col-xs-2">
                    <a href="#"><img src="data/1.jpg" class="img-responsive"></a>
                </div>
                <div class="col-xs-2">
                    <a href="#"><img src="data/1.jpg" class="img-responsive"></a>
                </div>
                <div class="col-xs-2">
                    <a href="#"><img src="data/1.jpg" class="img-responsive"></a>
                </div>
                <div class="col-xs-2">
                    <a href="#"><img src="data/1.jpg" class="img-responsive"></a>
                </div>
            </div>
        </div>

Answer 1

你应该稍微清理一下代码，而不是在循环内部过滤，数组应该包含你想要登记的文件和网址。

这会将HTML与PHP代码分开，使其更容易阅读。

$files = [
  'data/1.jpg', // can make an array as well, ['src'=>'data/1.jpg', 'href => 'link.com']
  'data/2.jpg',
  'data/3.jpg',
  'data/4.jpg',
  'data/5.jpg',
  'data/6.jpg',
  'data/7.jpg',
];

foreach(array_chunk($files, 6) as $row){
  echo '<div class="item"><div class="row">';
  foreach($row as $col){
    echo '<div class="col-xs-2">';
    echo '<a href="#"><img src="'.$col.'" class="img-responsive"></a>';
  //echo '<a href="'.$col['href'].'"><img src="'.$col['src'].'" class="img-responsive"></a>';
    echo '</div>';
  }
  echo '</div></div>';
}

如何在x循环后将设计分解成碎片

1 个答案: