Question

我需要建一个画廊。我有从01到09的图像。我需要在foreach上划分它们。第一个div必须具有活动类。我们需要每3个图像重复一次div。我需要这个html：

            <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>

Answer 1

首先，让我们开始将图像分组为三个的倍数。

// 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>

Answer 2

因此，您基本上想要为每个项目打印此部分：

<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>

你只想每隔三次打印这个部分，围绕以上三个组的组：

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


    </div>
</div>

您可以通过使用模数运算符%以及循环索引$x来简化事物，而不是尝试跟踪2个单独的计数。

当您想要以特定间隔重复某些内容时，这非常有用。从本质上讲，您可以通过执行以下操作每$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 } ?>

php foreach循环每3循环内爆

2 个答案: