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 {

  display: flex;

  flex-wrap: wrap;

  background: gray;

}

.item {

  display: flex;

  justify-content: center;

  align-items: center;

  width: 25%;

  height: 100px;

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

  background: red;

}

<div class="container">

  <div class="item">1</div>

  <div class="item">2</div>

  <div class="item">3</div>

  <div class="item">4</div>

  <div class="item">5</div>

  <div class="item">6</div>

  <div class="item">7</div>

  <div class="item">8</div>

  <div class="item">9</div>

  <div class="item">10</div>

  <div class="item">11</div>

  <div class="item">12</div>

  <div class="item">13</div>

  <div class="item">14</div>

  <div class="item">15</div>

  <div class="item">16</div>

  <div class="item">17</div>

  <div class="item">18</div>

  <div class="item">19</div>

  <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(); ?>

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

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

                <div class="product-list-item <?php if ($flag && ($c & 1) == 0 || !$flag && ($c & 1) == 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 = ($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{

    if($bool){

        echo 'color ' . $arr1[$i] . "\n";

    }else{

        echo 'color ' . $arr2[$i] . "\n";

    }

    $i = ++$i % 4;

    if($i ==0) $bool = !$bool;

}

下面是一个正在运行的代码示例：

https://3v4l.org/XdcHB