ACF 如果转发器数组中的第一项，则添加 Class

Question

我正在尝试使用 ACF 构建一个在页面加载时具有动画横幅的网站。为了使效果起作用，我需要第一个项目具有特定的 classes，然后它的兄弟姐妹没有那些 classes。我尝试使用计数器，但我是 PHP/ACF 的新手，所以虽然我可以做基本的中继器，但这让我有点卡住了。我试过的是下面

<?php if( have_rows('homepage_tiles') ): 
                                $count = 0;
                            ?>

                            <div class="hero-list-container">

                            <?php while( have_rows('homepage_tiles') ): the_row(); 

                                // vars
                                $image = get_sub_field('image');
                                $content = get_sub_field('content');
                                $link = get_sub_field('link');

                                ?>

                                <?php if($count == 0): ?>
                                    <div class="list-tile animate-up first">
                                        <div class="module-background" style="background-image: url('<?php the_sub_field('tile_bg_image') ?>'); background-size: cover;">
                                        </div>
                                    </div>
                                    <?php $counter++; ?>
                                <?php endif; ?>

                            <?php endwhile; ?>

                            </div>

                        <?php endif; ?>

我会很好地循环并只将 class 添加到第一个，或者输出第一个项目所需的完整 html，然后输出不同的 html休息。

感谢您的帮助！

所以我使用了这个并且它有效，但如果有人有更好的解决方案，我愿意接受。

<?php if( have_rows('homepage_tiles') ): 
                                $count = 1;
                            ?>

                            <div class="hero-list-container">

                            <?php while( have_rows('homepage_tiles') ): the_row(); 

                                // vars
                                $image = get_sub_field('image');
                                $content = get_sub_field('content');
                                $link = get_sub_field('link');

                                ?>

                                <?php if($count == 1): ?>
                                    <div class="list-tile animate-up first">
                                        <div class="module-background" style="background-image: url('<?php the_sub_field('tile_bg_image') ?>'); background-size: cover;">
                                        </div>
                                    </div>
                                <?php endif; ?>

                                <?php $count++; ?>

                                <?php if($count > 2): ?>
                                    <div class="list-tile">
                                        <div class="module-background" style="background-image: url('<?php the_sub_field('tile_bg_image') ?>'); background-size: cover;">
                                        </div>
                                    </div>
                                <?php endif; ?>

                            <?php endwhile; ?>

                            </div>

                        <?php endif; ?>

我将它设置为 >= 2 但由于某种原因它会重复第一张幻灯片。

Answer 1

我知道这个问题是几个月前发布的，但如果您想稍微简化一下代码，这里是我的解决方案。

<?php if( have_rows('homepage_tiles') ): $counter = 0; ?>
    <div class="hero-list-container">
        <?php
        while( have_rows('homepage_tiles') ): the_row();
            $tile_bg_image = get_sub_field('tile_bg_image');
            ?>
            <div class="list-tile<?php if( $counter == 0 ) { ?> animate-up first<?php } ?>">
                <div class="module-background" style="background-image: url('<?php echo $tile_bg_image; ?>'); background-size: cover;"></div>
            </div>
        <?php $counter++; endwhile; ?>
    </div>
<?php endif; ?>

ACF 如果转发器数组中的第一项，则添加 Class

ACF Add Class if first item in repeater array

php

repeater

advanced-custom-fields