1

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

Patrick Kunka 提供了一个如何在此处完成的示例。

同样的问题在这里被问到

我们的问题是推荐的灵魂不工作。我的猜测是它与由于 bootstrap + mixitup 问题导致的选择器更改有关：

控制：'[数据混合控制]'

这是页面末尾的一段代码：

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

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

4

3 回答 3

4

结合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]'
    }   
});
于 2018-02-23T05:27:22.970 回答
0

我试过这个例子，它适用于 2.1.6 版。

这是我的示例代码：

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

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

希望这可以帮助。

于 2017-05-19T07:44:40.613 回答
0

结合 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/

于 2017-06-04T17:46:27.777 回答