在另一个页面中重复使用相同的 mixitup 过滤器

如何解决在另一个页面中重复使用相同的 mixitup 过滤器

我对 mixitup 库有点陌生。基本上我正在开发一个 wordpress 站点并使用 mixitup 来过滤网格。我也在使用 ACF。有 2 个页面几乎相同（即它们使用相同的 ACF 面板结构），它们只是显示不同的帖子类型，我想对两个页面使用相同的过滤器。

HTML 代码：

<?PHP if( $the_query->have_posts() ): ?>
    <div class="grid mix">
        <?PHP while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

            <?PHP $outlet_types = get_the_terms( $products->ID,'outlet_type' ); ?>
            <?PHP $grating_materials = get_the_terms( $products->ID,'grating_material' ); ?>

            <div class="col-sm-6 col-md-3 mix-single all 
                        <?PHP foreach( $outlet_types as $outlet_type ) { echo $outlet_type->slug; } ?> 
                        <?PHP foreach( $grating_materials as $grating_material ) { echo $grating_material->slug; } ?>">

                <!-- Some content inside the card here -->

            </div>
        <?PHP endwhile; ?>
    </div>
<?PHP endif; wp_reset_query(); ?>

JS代码：

    var containerEl = document.querySelector('.mix');
    var outletSelect = $('#outlet-filters');
    var gratingSelect = $('#grating-filters');

    if (containerEl) {
        var mixer = mixitup(containerEl,{
            selectors: {
                target: '.mix-single',},animation: {
                duration: 300
            },controls: {
                live: true
            },load: {
                sort: 'published-date:asc'
            },callbacks: {
                onMixEnd: function(state) {
                    if (state.hasFailed) {
                        $('#no-results').css({'display':'block'});
                    } else {
                        $('#no-results').css({'display':'none'});
                    }
                }
            }
        });

        $('#outlet-filters,#grating-filters').on('change',function() {
            var filterString = productTypeSelect.val() + outletSelect.val() + 
            mixer.filter(filterString);
        });
    }

过滤器只能在一页上工作，我似乎无法弄清楚原因。我可能会为 2 个页面上的 2 个网格创建两个具有不同 ID 的单独过滤器，但我想知道是否有更快的方法来实现这一点。

更多信息：我在不同的 PHP 脚本上为一个完全不同的页面（几乎与上面的页面相同）添加了另一个过滤器，但使用相同的 JS 脚本，它工作正常。我真的很感激一些解释。谢谢！