我怎么能让一个类在循环中只应用一次呢 - How can I have a class be applied only once in a loop?

我正试图在Wordpress中使用Bootstrap旋转木马，所以我需要一个循环。然而，滑块脚本要求第一张幻灯片具有一个特殊的类，并且无法确定如何将该类应用于循环的第一次迭代，并且仅应用于循环（事实上，当转盘工作时，该类将在整个幻灯片中旋转，但html需要具有具有active类的第一张幻灯片，然后是没有该类的所有其他幻灯片）。

这是我到目前为止的代码：

<div id="myCarousel" class="carousel slide">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <!-- Wrapper for Slides -->
    <div class="carousel-inner">
        <?php if( have_rows('slide') ): ?>
        <?php while( have_rows('slide') ): the_row();
        // vars
        $img = get_sub_field('slide_image');
        $desc = get_sub_field('slide_text');
        $title = get_sub_field('slide_title');
        $url = $img['url'];
        $size = 'slider';
        $thumb = $gal['sizes'][ $size ];
        ?>
        <div class="item active">
            <!-- Set the first background image using inline CSS below. -->
            <div class="fill" style="background:url('<?php echo $img; ?>') no-repeat; background-size:cover;"></div>
            <div class="carousel-caption">
            <h2><?php echo $title; ?></h2>
            <div class="desc"><?php echo $desc; ?></div>
            </div>
        </div>
        <?php endwhile;?>               
        <?php endif;?>
    </div>
    <!-- Controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="icon-prev"></span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="icon-next"></span>
    </a>
</div>

作为参考，原始纯HTML代码位于https://github.com/IronSummitMedia/startbootstrap/blob/gh-pages/templates/half-slider/index.html

所以，简而言之，我需要的是这条线：

<div class="item active">

只有一次，但所有其他迭代都应该是

<div class="item">

这将类似于如何在循环中的特定（第一个元素）上放置类？，只是在PHP和WordPress中，我试图遵循这个答案，但无法理解

任何帮助都非常感谢

如果只想发生一次，只需使用$i变量。

<?php
// This sets the value to 0
$i = 0;
while( have_rows('slide') ): the_row();
        // vars
        $img = get_sub_field('slide_image');
        $desc = get_sub_field('slide_text');
        $title = get_sub_field('slide_title');
        $url = $img['url'];
        $size = 'slider';
        $thumb = $gal['sizes'][ $size ];
        ?>
        <!-------------------------------->
        <!-- THIS $i checks if equals 0 -->
        <!-------------------------------->
        <div class="item<?php if($i==0) { ?> active<?php } ?>">
            <!-- Set the first background image using inline CSS below. -->
            <div class="fill" style="background:url('<?php echo $img; ?>') no-repeat; background-size:cover;"></div>
            <div class="carousel-caption">
            <h2><?php echo $title; ?></h2>
            <div class="desc"><?php echo $desc; ?></div>
            </div>
        </div>
        <?php
        // This will increment $i so $i should not 
        // equal 0 except on the first loop
        $i++;
endwhile; ?>

您可以使用$wp_query->current_post获取循环中的索引位置，然后仅在$wp_query->current_post == 0

Edit：意识到你说的是"一个循环"而不是"循环"，你可以只使用一个变量和if语句来检查它是否是循环的第一次迭代

$show_active = true;
while( have_rows('slide') ): the_row();
    if ( $show_active ){
        $active = 'active';
        $show_active = false;
    } else {
        $active = '';
    }
endwhile;

我使用过：

<div class="carousel-inner">
    @foreach($banners as $banner)
    <div class="carousel-item @if($banner->id == 1) active @endif">
        <img class="d-block w-100" src="{{ Storage::disk('local')->url($banner->image) }}" alt="{{ $banner->title }}">
        <div class="carousel-caption d-none d-md-block">
            <h1>{{ $banner->title }}</h1>
            <p>{{ $banner->body }}</p>
        </div>
    </div>
    @endforeach
</div>

工作起来很轻松！