javascript - bootstrap + mixitup 过滤器加载问题

Question

我们正尝试通过 MixItUp v3.1.11 过滤在 Bootstrap 中显示我们的投资组合，并尝试在加载页面时加载特定类别(不是所有项目)。

Patrick Kunka 提供了如何完成的示例 here .

同样的问题被问到here

我们的问题是推荐的解决方案不起作用。我的猜测是由于bootstrap + mixitup问题导致选择器的变化有关:

control: '[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'
    }
  });
});

运气不好。知道问题出在哪里吗？

Answer 1

结合 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]'
    }   
});