我怎样才能让一个类在一个循环中只应用一次？答案

【问题标题】：How can I have a class be applied only once in a loop?我怎样才能让一个类在一个循环中只应用一次？
【发布时间】：2018-11-22 06:11:36
【问题描述】：

我正在尝试在 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">

类似于How to put an class on specific (first element) inside loop?，只是在 PHP 和 WordPress 中，我尝试遵循该答案但无法理解

非常感谢任何帮助

【问题讨论】：

标签： php wordpress twitter-bootstrap

【解决方案1】：

如果您只希望出现一次，只需使用 $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; ?>

【讨论】：

尝试了您的代码，但它将活动类添加到所有迭代中
你最后取消$i了吗？它应该在第一个循环后取消设置。
是的，事实上我什至尝试复制粘贴你的整个代码只是为了确定，但总是相同的结果
如果下一次编辑不起作用，我不知道会发生什么！第一个应该可以顺利运行。

【解决方案2】：

您可以使用$wp_query->current_post 获取循环中的索引位置，然后仅在$wp_query->current_post == 0 时打印出“活动”

编辑：意识到您说的是“循环”而不是“循环”，您可以只使用变量和 if 语句来检查它是否是循环的第一次迭代。

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

【讨论】：

问题是我的知识非常有限，我不知道该怎么做

【解决方案3】：

我用过：

<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>

轻而易举地工作！

【讨论】：