Question

我有一系列图标。现在，我们只将它们显示在4个桶中。因此，如果您有7个图标，则第一张幻灯片上的第4个图标将重复为第2张幻灯片上的第8个图标。那是因为数组的第3个索引存储在同一个地方。要解决这个问题，我想循环遍历数组而不是显式地逐个图标迭代。

            <?php if (!empty($icons)) { // if we have icons attributes 
              // NOTE: we've changed it to show as many sets as we can
              //       (sets of 4)
                $number_of_sets = ceil(count($icons) / 4);
            $k=0; // for inner iteration
            for ($j=0;$j < $number_of_sets; $j++) {
                $slide_total ++;
                ?>

                <div class="cf slide icon-slide">
                    <?php
            // up to 4 icons
                    if (is_array($icons) && !empty($icons[$k])) {
                        $icon1 = $icons[$k];
                        $k++;
                    }
                    ?>
                    <div class="col left">
                        <div class="cf icon">
                            <div class="col thumb">
                                <img src="<?=$icon1['thumb']?>" alt="<?=htmlentities($icon1['post_title'])?>" />
                            </div>
                            <div class="colR details">
                                <h4><?=$icon1['post_title']?></h4>
                                <p><?=$icon1['post_content']?></p>
                            </div>
                        </div>
                        <?php
            // up to 4 icons
                        if (is_array($icons) && !empty($icons[$k])) {
                            $icon2 = $icons[$k];
                            $k++;
                        }
                        ?>
                        <div class="cf icon">
                            <div class="col thumb">
                                <img src="<?=$icon2['thumb']?>" alt="<?=htmlentities($icon2['post_title'])?>" />
                            </div>
                            <div class="colR details">
                                <h4><?=$icon2['post_title']?></h4>
                                <p><?=$icon2['post_content']?></p>
                            </div>
                        </div>
                    </div>

                    <?php
            // up to 4 icons
                    if (is_array($icons) && !empty($icons[$k])) {
                        $icon3 = $icons[$k];
                        $k++;
                    }
                    ?>
                    <div class="colR right">
                        <div class="cf icon">
                            <div class="col thumb">
                                <img src="<?=$icon3['thumb']?>" alt="<?=htmlentities($icon3['post_title'])?>" />
                            </div>
                            <div class="colR details">
                                <h4><?=$icon3['post_title']?></h4>
                                <p><?=$icon3['post_content']?></p>
                            </div>
                        </div>
                        <?php
            // up to 4 icons
                        if (is_array($icons) && !empty($icons[$k])) {
                            $icon4 = $icons[$k];
                            $k++;
                        }
                        ?>
                        <div class="cf icon">
                            <div class="col thumb">
                                <img src="<?=$icon4['thumb']?>" alt="<?=htmlentities($icon4['post_title'])?>" />
                            </div>
                            <div class="colR details">
                                <h4><?=$icon4['post_title']?></h4>
                                <p><?=$icon4['post_content']?></p>
                            </div>
                        </div>
                    </div>
                </div> <!-- // end icon slide -->
                <?php
            } // end for $j (number of sets of 4 icons
            ?>

我建议的解决方案：

            <?php if (!empty($icons)) { 
                $num_cols = 2;
                $i = 0;
                $slide_items = 4;
                ?>

                <div class="cf slide icon-slide">
                    <?php foreach ( $icons as $icon ) {


                        echo $i++%$num_cols==0 ? '</div><div class="col" style="width: 250px;">' : '';

                        ?>
                        <div class="cf icon">
                            <div class="col thumb">
                                <img src="<?=$icon['thumb']?>" alt="<?=htmlentities($icon['post_title'])?>" />
                            </div>
                            <div class="colR details">
                                <h4><?=$icon['post_title']?></h4>
                                <p><?=$icon['post_content']?></p>
                            </div>
                        </div>



                        <?php  } } // end if we have icons attributes ?>

在我点击4个图标后，我无法弄清楚如何制作另一张幻灯片。在foreach循环结束之前添加以下行无效。

echo $i++%$slide_items==0 ? '</div><div class="cf slide icon-slide">' : '';

Answer 1

这是循环的一些逻辑：

$i = count( $icons );    

if ( $i % 4 != 0 )
    $i = $i + ( $i % 4 );

for( $n = 0; $n < $i; $n++ )
{

    if ( $n % 4 == 0 )
    {
        // code to open a row here
    }

    // code to open a column here

    // echo your icon here, use isset() or !empty().

    // code to close a column here

    if ( $n > 0 && $n % 3 == 0 )
    {
        // code to close a row here
    }

}

顶部的IF用于保持列号一致。否则，在循环结束时会出现一些奇怪的现象。

如何在PHP / HTML中显示两列数组？

1 个答案: