将CSS类应用于每隔一次的数据库记录

我有一个叫做“switchable”的类，它基本上是从左到右、从右到左切换文本和图像。我希望每秒钟都有这样的记录。所以，左边的第一个，右边的第二个等等。我不知道如何用下面的代码实现这一点。每一秒的记录都应该，

    <?php $the_query = new WP_Query( array ( \'post_type\' => \'crew_members\', \'order_by\' => \'menu_order\', \'order\' => \'ASC\' ) ); ?>

    <?php if( $the_query->have_posts() ): while ( $the_query->have_posts() ) : $the_query->the_post() ; ?>

    <section>
        <div class="container">
            <div class="row justify-content-between">
                <div class="col-md-6">
                    <div> <?php the_content(); ?> </div>
                </div>
                <div class="col-md-6">
                    <div class="boxed boxed--lg boxed--border bg--secondary"> <?php the_post_thumbnail( array (475, 317), [ \'class\' => \'border--round\' ] ); ?>
                        <h5><?php the_title(); ?></h5>
                        <p> <?php the_field( \'crew_member_excerpt\' ); ?> </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <?php endwhile; endif; ?>
    <?php wp_reset_postdata(); ?>

EDIT:

在swissspidy的回答之后，我尝试了以下方法：

<?php 
if ( 1 === $the_query->current_post % 2 ) {
        $class = \'class="switchable"\';
}
?>
<section <?php echo $class; ?>>
    <div class="container">
        <div class="row justify-content-between">
            <div class="col-md-6">
                <div> <?php the_content(); ?> </div>
            </div>
            <div class="col-md-6">
                <div class="boxed boxed--lg boxed--border bg--secondary"> <img src="<?php the_post_thumbnail_url(); ?>" class="border--round">
                   <?php // another way: <?php the_post_thumbnail( array (475, 317), [ \'class\' => \'border--round\' ] ); ?>
                    <h5><?php the_title(); ?></h5>
                    <p> <?php the_field( \'crew_member_excerpt\' ); ?> </p>
                </div>
            </div>
        </div>
    </div>
</section>

<div id="your-content"> <p>Left</p> <p>Right</p> <p>Left</p> <p>Right</p> </div> #your-content p { [styles for making all of them left] } #your-content p:nth-child(even) { [styles for making the even-numbered ones right] }

小码农CODE

相关推荐

Loop increase number