如何在ACF Pro 5中隐藏Sub_field为空的Repeater字段项

我来帮你搞定这个ACF Pro 5 Repeater字段的隐藏问题！根据你的需求，我分两种常见场景给出解决方案，你可以根据实际使用场景选择：

场景1：前端显示时隐藏空值条目 #

如果是在网站前端模板里不想输出sub_field_value为空的Repeater行，直接在循环里做判断过滤就行，代码简单直接：

<?php if (have_rows('你的_repeater字段名称')) : ?>
    <div class="repeater-content">
        <?php while (have_rows('你的_repeater字段名称')) : the_row(); ?>
            <?php 
            // 获取子字段值并去除首尾空格
            $sub_value = trim(get_sub_field('sub_field_value'));
            // 只有当sub_field_value不为空时，才渲染两个子字段
            if (!empty($sub_value)) :
            ?>
                <div class="repeater-item">
                    <span class="item-label"><?php the_sub_field('sub_field_item'); ?></span>
                    <span class="item-value"><?php echo esc_html($sub_value); ?></span>
                </div>
            <?php endif; ?>
        <?php endwhile; ?>
    </div>
<?php endif; ?>

替换代码里的你的_repeater字段名称为你实际的Repeater字段名即可，这个方法能确保只有有内容的行才会被前端渲染出来。

场景2：后台编辑界面实时隐藏空值字段 #

如果你需要在WordPress后台编辑页面中，当某个Repeater行的sub_field_value为空时，自动隐藏该行的两个子字段（甚至整行），可以用ACF的JS钩子实现实时监听：

在主题的functions.php文件中添加以下代码：

add_action('acf/input/admin_footer', 'hide_empty_repeater_rows');
function hide_empty_repeater_rows() {
    ?>
    <script type="text/javascript">
    (function($) {
        // 监听ACF字段加载和新增Repeater行的事件
        acf.add_action('ready append', function($el) {
            // 定位到你的Repeater字段行（替换成你的Repeater字段键/名称）
            var $repeaterRows = $el.find('.acf-field-你的repeater字段键 .acf-row');
            
            $repeaterRows.each(function() {
                var $currentRow = $(this);
                // 获取当前行的sub_field_value输入框
                var $valueInput = $currentRow.find('.acf-field-sub_field_value input, .acf-field-sub_field_value textarea');
                
                // 定义检查并隐藏的逻辑
                function toggleFieldVisibility() {
                    var inputValue = $valueInput.val().trim();
                    if (inputValue === '') {
                        // 隐藏当前行的两个子字段
                        $currentRow.find('.acf-field-sub_field_item, .acf-field-sub_field_value').hide();
                        // 如果想直接隐藏整行，替换成下面这行：
                        // $currentRow.hide();
                    } else {
                        $currentRow.find('.acf-field-sub_field_item, .acf-field-sub_field_value').show();
                        // 对应整行显示：
                        // $currentRow.show();
                    }
                }
                
                // 页面加载时先检查一次
                toggleFieldVisibility();
                // 输入框内容变化时重新检查
                $valueInput.on('input change', toggleFieldVisibility);
            });
        });
    })(jQuery);
    </script>
    <?php
}

注意替换代码里的你的repeater字段键（建议用字段键，比字段名更稳定），以及确保sub_field_item和sub_field_value与你的子字段名称完全匹配。

为什么你之前的代码没生效？ #

大概率是这几个原因：

• 字段名称/键写错了：ACF字段名区分大小写，一定要和你在ACF后台设置的完全一致
• 前端判断逻辑错误：比如用了isset()而不是!empty()——isset()在字段存在但为空时也会返回true，判断空值要用!empty()
• 后台钩子没选对：如果是后台处理，没监听append事件的话，新增的Repeater行不会触发隐藏逻辑

你可以先排查这些点，再试试上面的方案，应该就能解决问题了。

内容的提问来源于stack exchange，提问作者Ayesha Akter