MIXITUP jquery过滤器参数

Question

我正在查看混合jquery插件，这里；http://mixitup.io

我希望使用‘公园’演示，其中有二维过滤。

但是，如果您查看演示使用的JS的底部，下面会提到；

在这种情况下，MixItUp将使用每个维度中的OR逻辑和维度之间的逻辑来显示元素。

在我的例子中，我实际上需要在每个维度中使用和逻辑，以及维度之间的逻辑。

如果任何使用过这个jquery插件或能够从下面找到它的人都能提供帮助，我将非常感激。谢谢。

<script type="text/javascript">

        /* 
        *   We would normally recommend that all JavaScript is kept in a seperate .js file,
        *   but we have included it in the document head for convenience.
        */

        // NICE IMAGE LOADING

        /* 
        *   Not part of MixItUp, but this is a great lightweight way 
        *   to gracefully fade-in images with CSS3 after they have loaded
        */

        function imgLoaded(img){    
            $(img).parent().addClass('loaded');
        };

        // ON DOCUMENT READY:

        $(function(){

            // INSTANTIATE MIXITUP

            $('#Parks').mixitup({
                layoutMode: 'list', // Start in list mode (display: block) by default
                listClass: 'list', // Container class for when in list mode
                gridClass: 'grid', // Container class for when in grid mode
                effects: ['fade','blur'], // List of effects 
                listEffects: ['fade','rotateX'] // List of effects ONLY for list mode
            });

            // HANDLE LAYOUT CHANGES

            // Bind layout buttons to toList and toGrid methods:

            $('#ToList').on('click',function(){
                $('.button').removeClass('active');
                $(this).addClass('active');
                $('#Parks').mixitup('toList');
            });

            $('#ToGrid').on('click',function(){
                $('.button').removeClass('active');
                $(this).addClass('active');
                $('#Parks').mixitup('toGrid');
            });

            // HANDLE MULTI-DIMENSIONAL CHECKBOX FILTERING

            /*  
            *   The desired behaviour of multi-dimensional filtering can differ greatly 
            *   from project to project. MixItUp's built in filter button handlers are best
            *   suited to simple filter operations, so we will need to build our own handlers
            *   for this demo to achieve the precise behaviour we need.
            */

            var $filters = $('#Filters').find('li'),
                dimensions = {
                    region: 'all', // Create string for first dimension
                    recreation: 'all' // Create string for second dimension
                };

            // Bind checkbox click handlers:

            $filters.on('click',function(){
                var $t = $(this),
                    dimension = $t.attr('data-dimension'),
                    filter = $t.attr('data-filter'),
                    filterString = dimensions[dimension];

                if(filter == 'all'){
                    // If "all"
                    if(!$t.hasClass('active')){
                        // if unchecked, check "all" and uncheck all other active filters
                        $t.addClass('active').siblings().removeClass('active');
                        // Replace entire string with "all"
                        filterString = 'all';   
                    } else {
                        // Uncheck
                        $t.removeClass('active');
                        // Emtpy string
                        filterString = '';
                    }
                } else {
                    // Else, uncheck "all"
                    $t.siblings('[data-filter="all"]').removeClass('active');
                    // Remove "all" from string
                    filterString = filterString.replace('all','');
                    if(!$t.hasClass('active')){
                        // Check checkbox
                        $t.addClass('active');
                        // Append filter to string
                        filterString = filterString == '' ? filter : filterString+' '+filter;
                    } else {
                        // Uncheck
                        $t.removeClass('active');
                        // Remove filter and preceeding space from string with RegEx
                        var re = new RegExp('(\\s|^)'+filter);
                        filterString = filterString.replace(re,'');
                    };
                };

                // Set demension with filterString
                dimensions[dimension] = filterString;

                // We now have two strings containing the filter arguments for each dimension:  
                console.info('dimension 1: '+dimensions.region);
                console.info('dimension 2: '+dimensions.recreation);

                /*
                *   We then send these strings to MixItUp using the filter method. We can send as
                *   many dimensions to MixitUp as we need using an array as the second argument
                *   of the "filter" method. Each dimension must be a space seperated string.
                *
                *   In this case, MixItUp will show elements using OR logic within each dimension and
                *   AND logic between dimensions. At least one dimension must pass for the element to show.
                */

                $('#Parks').mixitup('filter',[dimensions.region, dimensions.recreation])            
            });

        });
    </script>

Answer 1

我以前没有使用过use，所以我不能保证它能工作，但是您需要做的似乎是使用filterLogic配置选项(http://mixitup.io/#FilterLogic)。

用下面的代码替换$('#Parks').mixitup('filter',[dimensions.region, dimensions.recreation])，它应该适合您。

$('#Parks').mixitup({
  filter: [dimensions.region, dimensions.recreation],
  filterLogic: 'and'
})