javascript - bootstrap + mixitup过滤器在负载问题

我们正在尝试通过MixItUp v3.1.11过滤在引导程序中显示我们的投资组合，并试图在加载页面时加载特定类别（不是所有项目）。

Patrick Kunka提供了一个示例，说明如何完成here。

提出了相同的问题here

我们的问题是推荐的灵魂无法正常工作。我的猜测是由于引导+ mixitup问题，这与选择器的更改有关：


  控件：“ [data-mixitup-control]”


这是页面结尾的代码：

var containerEl = document.querySelector('#selector');

        var mixer = mixitup(containerEl, {
            selectors: {
                target: '.mix',
                control: '[data-mixitup-control]'
        },
            animation: {
                effects: 'fade scale stagger(50ms)' // Set a 'stagger' effect for the loading animation
            },
            load: {
                filter: 'none' // Ensure all targets start from hidden (i.e. display: none;)
            }
        });

        // Add a class to the container to remove 'visibility: hidden;' from targets. This
        // prevents any flickr of content before the page's JavaScript has loaded.

        containerEl.classList.add('mixitup-ready');

        // Show all targets in the container

        mixer.show()
            .then(function() {
                // Remove the stagger effect for any subsequent operations

                mixer.configure({
                    animation: {
                        effects: 'fade scale'
                    },
            load: {
                filter: '.residential' // Ensure all targets start from hidden (i.e. display: none;)
            }
                });
            });

当我将过滤器更改为所需的.residential时，它不起作用。

我也尝试添加以下内容：

    $(function(){
  $('#selector').mixItUp({
    load: {
      filter: '.residential'
    }
  });
});

没运气。有人知道问题可能在哪里吗？

最佳答案

与MixItUp v3.1.9和Bootstrap 4组合使用此示例。

添加data-mixitup-control以避免与其他数据属性冲突：

    <button type="button" class="control" data-mixitup-control data-`enter code here`filter=".product">PRODUCTS</button>

初始化MixItUp：

    var container = document.querySelector('.portfolio');

var mixer = mixitup(container, {
    selectors: {
        control: '[data-mixitup-control]'
    }
});