4次后复位循环

Question

我正在我的页面上循环使用产品，背景颜色如下：

“透明” - “灰色” - “透明” - “灰色”

每行有4种产品，但当第二行开始时，它正在做相同的顺序，例如：

情况1 - 错误的情况

“透明” - “灰色” - “透明” - “灰色

” - “灰色” - “灰色”

但我希望它像：

情况2 - 正确的情况

“透明” - “灰色” - “透明” - “灰色

” - “透明” - “灰色” - “透明”

有谁知道如何编辑我的循环以获得如上所述的结构？

<div class="row page-margin pb-5">

    <?php

    $term = get_field('product_category'); if( $term ): $cat = esc_html( $term->slug ); endif;

    $args = array( 'post_type' => 'product', 'product_cat' => $cat);

    $loop = new WP_Query( $args );

    $product_id = get_the_id();

    $c = 0;

    $product = wc_get_product( $product_id );

    while ( $loop->have_posts() ) : $loop->the_post(); ?>

        <div class="col-md-3 pl-0 pr-0">

            <a href="<?php the_permalink(); ?>">

                <div class="product-list-item <?php if ($c & 1) { ?>bg-grey<?php } ?>">

                    <div class="img-wrapper">

                        <?php echo $product->get_image('full', array('class' => 'img-fluid')); ?>

                    </div>

                    <div class="product-content">

                        <span class="product-title"><?php echo $product->get_name(); ?></span>

                        <span class="product-price">€ <?php $price = $product->price; $price_incl_tax = $price + round($price * ( 0 / 100 ), 2); $price_incl_tax = number_format($price_incl_tax, 2, ",", "."); $price = number_format($price, 2, ",", "."); echo $price_incl_tax; ?> incl. BTW</span>

                    </div>

                </div>

            </a>

        </div>

    <?php $c++; endwhile; wp_reset_query(); // Remember to reset ?>

</div>

这是错误情况的图像（情况1）：
错误的情况图片

Answer 1

无需将其硬编码到模板中。使用 CSS 通过稍微复杂的选择器列表来实现此目的。您可以将其包装在媒体查询中，因为我看到您有.假设你正在使用引导，那将是你会使用的。col-md-3@include media-breakpoint-up(md).container {&nbsp; display: flex;&nbsp; flex-wrap: wrap;&nbsp; background: gray;}.item {&nbsp; display: flex;&nbsp; justify-content: center;&nbsp; align-items: center;&nbsp; width: 25%;&nbsp; height: 100px;&nbsp; background: white;}.item:nth-child(4n+2):not(:nth-child(8n-2)), /* 2, 10, 18… */.item:nth-child(4n+4):not(:nth-child(8n)), /* 4, 12, 20… */.item:nth-child(4n+1):not(:nth-child(8n+1)), /* 5, 13, 21… */.item:nth-child(4n+3):not(:nth-child(8n+3)) { /* 7, 15, 23… */&nbsp; background: red;}<div class="container">&nbsp; <div class="item">1</div>&nbsp; <div class="item">2</div>&nbsp; <div class="item">3</div>&nbsp; <div class="item">4</div>&nbsp; <div class="item">5</div>&nbsp; <div class="item">6</div>&nbsp; <div class="item">7</div>&nbsp; <div class="item">8</div>&nbsp; <div class="item">9</div>&nbsp; <div class="item">10</div>&nbsp; <div class="item">11</div>&nbsp; <div class="item">12</div>&nbsp; <div class="item">13</div>&nbsp; <div class="item">14</div>&nbsp; <div class="item">15</div>&nbsp; <div class="item">16</div>&nbsp; <div class="item">17</div>&nbsp; <div class="item">18</div>&nbsp; <div class="item">19</div>&nbsp; <div class="item">20</div></div>现在来解释一下选择器逻辑：您希望将每个第 2 个和第 4 个子项定位到奇数行，将第 1 个和第 3 个子项定位到偶数行上。为此，您可以分别定位：每 2 个项目不是 6 的倍数每 4 个项目不是 8 的倍数每 5 个项目不是 9 的倍数每 7 个项目不是 11 的倍数希望这有帮助！

Answer 2

好吧，这有点棘手，因为您正在更改4块的决策顺序。要确定这一点，您可以有一个初始设置为 的额外变量。$flagfalse因此，检查结果为：if ($flag && ($c & 1) == 0 || !$flag && ($c & 1) == 1)这表示如果我们处于奇数迭代（当$flag为假时）并且当前是奇数，或者我们处于偶数迭代（当$flag为真时）并且电流是偶数。$c$c当重新初始化以指示下一行翻转时，我们会重置该标志。$c0片段：<?php$c = 0;$product = wc_get_product( $product_id );while ( $loop->have_posts() ) : $loop->the_post(); ?>&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-md-3 pl-0 pr-0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="<?php the_permalink(); ?>">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="product-list-item <?php if ($flag && ($c & 1) == 0 || !$flag && ($c & 1) == 1) { ?>bg-grey<?php } ?>">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="img-wrapper">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php echo $product->get_image('full', array('class' => 'img-fluid')); ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="product-content">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="product-title"><?php echo $product->get_name(); ?></span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="product-price">€ <?php $price = $product->price; $price_incl_tax = $price + round($price * ( 0 / 100 ), 2); $price_incl_tax = number_format($price_incl_tax, 2, ",", "."); $price = number_format($price, 2, ",", "."); echo $price_incl_tax; ?> incl. BTW</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; <?php $c = ($c + 1) % 4; $flag = $c == 0 ? !$flag : $flag; endwhile; wp_reset_query(); // Remember to reset ?>

Answer 3

如果你想在php中完成它，我发现工作方法是使用两个与透明和灰色不同步的数组。然后从一行上的一个数组回显，然后切换。这不是一个好的代码，但它可以解决问题。$arr1 = ['transparent', 'grey', 'transparent', 'grey'];$arr2 = ['grey', 'transparent', 'grey', 'transparent'];$i = 0;$bool = true;Your loop{&nbsp; &nbsp; if($bool){&nbsp; &nbsp; &nbsp; &nbsp; echo 'color ' . $arr1[$i] . "\n";&nbsp; &nbsp; }else{&nbsp; &nbsp; &nbsp; &nbsp; echo 'color ' . $arr2[$i] . "\n";&nbsp; &nbsp; }&nbsp; &nbsp; $i = ++$i % 4;&nbsp; &nbsp; if($i ==0) $bool = !$bool;}下面是一个正在运行的代码示例：https://3v4l.org/XdcHB