Question

我们试图通过MixItUp v3.1.11过滤在bootstrap中显示我们的产品组合，并且在加载页面时尝试加载某个类别（不是所有项目）。

Patrick Kunka提供了一个如何完成here的例子。

同样的问题被问到here

我们的问题是，推荐的灵魂不起作用。我的猜测是，由于bootstrap + 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'
    }
  });
});

没有运气。任何人都知道问题在哪里？

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

Answer 2

我已经尝试了这个示例，它适用于2.1.6版。

这是我的示例代码：

$(function(){
  $('#selector').mixItUp({
    selectors: {
      target: '.item'
    },
    layout: {
      display: 'inline-block'
    },
    load: {
      filter: '.residential'
    }
  });
});

这将仅使用与.residential可见的项目相关的项目加载DOM。

希望这有帮助。

Answer 3

结合MixItUp版本3.1.11和Bootstrap 3尝试此示例。

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

<button type="button" class="control" data-mixitup-control data-filter=".residential">Residential</button>

初始化MixItUp：

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

var mixer = mixitup(containerEl, {
    selectors: {
        control: '[data-mixitup-control]'
    },
    load: {
        filter: '.residential'
    }
});

您不需要单独设置'fade scale'动画效果 - 它是默认设置。 https://www.kunkalabs.com/mixitup/docs/configuration-object/

bootstrap + mixitup过滤器负载问题

3 个答案: