0

我很清楚在 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/

提前致谢

4

1 回答 1

2

看看公园演示： 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])            
            });
于 2013-07-18T07:36:44.970 回答