如何反转数组数据？

Question

我希望数组 1,3,5,7,9 布局将从数组 0,2,4,6,8,10 反转，例如第一行布局 - 左侧的图像和右侧的描述，第二行的布局 - 图像在右边和左边的描述，并不断。这是我的function.php代码<?php            foreach ( $termchildren as $child ) {                $term = get_term_by( 'id', $child, $taxonomy_name );                $image = get_field('featured_image', $term);                ?>                <div class="row">                    <div id="product-cat <?php echo $term->slug ?>">                        <div class="two-col product-cat-image">                            <img src="<?php echo $image ?>">                        </div>                        <div class="two-col product-cat-details">                            <?php                                echo '<h4>'. $term->name .'</h4>';                                echo '<p>'. $term->description .'</p>';                                echo '<a class="product-cat-button" href="' . get_term_link( $child, $taxonomy_name ) . '">See Products</a>';                            ?>                        </div>                    </div>                </div><?php            } ?>CSS代码：.row{  display: flex;  margin-left: -10px;  margin-right: -10px;  margin-bottom: 15px;}.row .col {  flex: 1;  padding-right: 10px;  padding-left: 10px;}结果还是这样我的期望是这样的：

Answer 1

我们只需要更改function.php中的代码，如下所示。

<?php

    $i=0; 

    foreach ( $termchildren as $child ) {

        $term = get_term_by( 'id', $child, $taxonomy_name );

        $image = get_field('featured_image', $term);

        if($i % 2){ ?>

            <div class="row">

                <div id="product-cat <?php echo $term->slug ?>">

                    <div class="two-col product-cat-image">

                        <img src="<?php echo $image ?>">

                    </div>

                    <div class="two-col product-cat-details">

                        <?php

                            echo '<h4>'. $term->name .'</h4>';

                            echo '<p>'. $term->description .'</p>';

                            echo '<a class="product-cat-button" href="' . get_term_link( $child, $taxonomy_name ) . '">See Products</a>';

                        ?>

                    </div>

                </div>

            </div>

        <?php } else {?>

            <div class="row">

                <div id="product-cat <?php echo $term->slug ?>">

                    <div class="two-col product-cat-details">

                        <?php

                            echo '<h4>'. $term->name .'</h4>';

                            echo '<p>'. $term->description .'</p>';

                            echo '<a class="product-cat-button" href="' . get_term_link( $child, $taxonomy_name ) . '">See Products</a>';

                        ?>

                    </div>

                    <div class="two-col product-cat-image">

                        <img src="<?php echo $image ?>">

                    </div>

                </div>

            </div>

        <?php }

       $i++;

    }

?>

希望现在你得到了所有的东西，让我知道还有什么需要帮助的。

Answer 2

您需要添加以下 css 以实现所需的输出：

当.product-cat发现奇数div 适用order: 1;于图像容器（.product-cat-image）和order: 2;细节容器（.product-cat-details）

当.product-cat找到的 div 也适用order: 2;于图像容器（.product-cat-image）和order: 1;细节容器（.product-cat-details）

.product-cat:nth-child(odd) .product-cat-image{

   -webkit-order: 1;

    order: 1;

}

.product-cat:nth-child(odd) .product-cat-details{

   -webkit-order: 2;

    order: 2;

}

.product-cat:nth-child(even) .product-cat-image{

   -webkit-order: 2;

    order: 2;

}

.product-cat:nth-child(even) .product-cat-details{

   -webkit-order: 1;

    order: 1;

}