Question

我很清楚SO上也存在类似的问题，但由于这一点，它被严重呈现并且仍未得到答复。

问题是：我在这个插件上启用多重过滤时遇到了死胡同。任何人都可以告诉我使用小提琴如何做到这一点？

这是一个问题：如果我点击柠檬并点击小，它当然应该显示小柠檬。但是，如果我决定我想要大柠檬，它应该切换并显示大柠檬，同时覆盖相同过滤器类别的先前“小”过滤器。

因此，相同类别的过滤器不应相互堆叠，而是相互排斥而不需要“单击它们”复选框样式。这甚至可能吗？

这是我最接近达到这种效果，但我描述的问题仍然存在

                targetSelector : '.mix',
                filterSelector : '.filter',
                sortSelector : '.sort',
                buttonEvent: 'click',
                effects : ['fade', 'scale'],
                listEffects : null,
                easing : 'smooth',
                layoutMode: 'grid',
                targetDisplayGrid : 'inline-block',
                targetDisplayList: 'block',
                listClass : '',
                gridClass : '',
                transitionSpeed : 600,
                showOnLoad : 'all',
                sortOnLoad : false,
                multiFilter : true,
                filterLogic : 'and',
                resizeContainer : true,
                minHeight : 0,
                failClass : 'fail',
                perspectiveDistance : '3000',
                perspectiveOrigin : '50% 50%',
                animateGridList : true,
                onMixLoad: null,
                onMixStart : null,
                onMixEnd : null,

这是小提琴，请帮助http://jsfiddle.net/DwX29/

提前致谢

Answer 1

看一下park-demo：http://mixitup.io/demos/parks

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

知道如何在这种特殊情况下启用多重过滤~MixItUp插件

1 个答案: