如何通过下拉选择切换ACF Repeater行以展示对应尺寸产品缩略图滑块

方案一：前端过滤（推荐，无冗余内容） #

这种方案仅加载一次所有ACF Repeater数据，通过前端逻辑控制显示/隐藏对应尺寸的滑块项，彻底避免多组滑块带来的冗余加载问题。

实现步骤： #

1. 后端输出带尺寸标识的滑块项
   在PHP模板中遍历ACF Repeater时，给每个滑块项添加尺寸相关的自定义属性，所有项统一放在同一个滑块容器内：

<div class="product-slider-container">
    <?php if( have_rows('product_slider') ): ?>
        <?php while( have_rows('product_slider') ): the_row(); 
            $size = get_sub_field('product_size'); // 假设ACF字段名为product_size，值为small/large
            $thumb = get_sub_field('product_thumbnail');
        ?>
            <div class="slider-item" data-size="<?php echo esc_attr($size); ?>">
                <img src="<?php echo esc_url($thumb['url']); ?>" alt="<?php echo esc_attr($thumb['alt']); ?>">
                <!-- 其他产品相关内容 -->
            </div>
        <?php endwhile; ?>
    <?php endif; ?>
</div>

<select id="size-selector">
    <option value="small">小尺寸</option>
    <option value="large">大尺寸</option>
</select>

2. 初始化滑块并绑定切换逻辑
   以常用的Swiper滑块插件为例，先初始化默认尺寸的滑块，再监听下拉选择器的切换事件，动态更新滑块内容：

// 封装滑块初始化函数
function initSlider(targetSize) {
    // 销毁已存在的滑块实例，避免冲突
    if (window.productSlider) {
        window.productSlider.destroy(true, true);
    }

    // 隐藏所有滑块项，仅显示目标尺寸的内容
    $('.slider-item').hide();
    $('.slider-item[data-size="' + targetSize + '"]').show();

    // 重新初始化滑块
    window.productSlider = new Swiper('.product-slider-container', {
        slidesPerView: 3,
        spaceBetween: 20,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        }
    });
}

// 页面加载完成后初始化默认尺寸
$(document).ready(function() {
    initSlider('small');

    // 监听下拉选择器的切换事件
    $('#size-selector').on('change', function() {
        const selectedSize = $(this).val();
        initSlider(selectedSize);
    });
});

方案二：AJAX动态加载（适合大数据量场景） #

如果Repeater数据量极大，一次性加载所有内容会影响页面初始加载性能，可以通过AJAX按需加载对应尺寸的滑块内容：

实现步骤： #

1. 创建AJAX处理接口
   在主题的functions.php中添加AJAX回调函数，根据传入的尺寸参数返回对应的Repeater内容：

add_action('wp_ajax_get_product_slider', 'get_product_slider');
add_action('wp_ajax_nopriv_get_product_slider', 'get_product_slider');

function get_product_slider() {
    if (!isset($_POST['size'])) {
        wp_send_json_error('缺少尺寸参数');
    }
    $size = sanitize_text_field($_POST['size']);
    ob_start();

    if( have_rows('product_slider') ):
        while( have_rows('product_slider') ): the_row();
            if (get_sub_field('product_size') === $size) {
                $thumb = get_sub_field('product_thumbnail');
                ?>
                <div class="slider-item">
                    <img src="<?php echo esc_url($thumb['url']); ?>" alt="<?php echo esc_attr($thumb['alt']); ?>">
                    <!-- 其他产品相关内容 -->
                </div>
                <?php
            }
        endwhile;
    endif;

    $content = ob_get_clean();
    wp_send_json_success($content);
}

2. 前端AJAX请求与滑块初始化

function loadSliderBySize(selectedSize) {
    // 销毁现有滑块实例
    if (window.productSlider) {
        window.productSlider.destroy(true, true);
    }

    // 发送AJAX请求获取对应尺寸的内容
    $.ajax({
        url: '<?php echo admin_url('admin-ajax.php'); ?>',
        type: 'POST',
        data: {
            action: 'get_product_slider',
            size: selectedSize
        },
        success: function(response) {
            if (response.success) {
                // 清空滑块容器并插入新内容
                $('.product-slider-container').html(response.data);
                // 重新初始化滑块
                window.productSlider = new Swiper('.product-slider-container', {
                    slidesPerView: 3,
                    spaceBetween: 20
                });
            }
        }
    });
}

$(document).ready(function() {
    // 初始化默认尺寸
    loadSliderBySize('small');

    $('#size-selector').on('change', function() {
        const selectedSize = $(this).val();
        loadSliderBySize(selectedSize);
    });
});

方案对比 #

• 前端过滤方案：实现简单，无需额外接口开发，切换响应速度快，适合数据量不大的场景。
• AJAX动态加载方案：仅加载当前选中尺寸的内容，页面初始加载更轻量，适合数据量极大的场景。

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