jQuery Mixitup删除多个过滤器选择

Question

我正在使用jQuery Mixitup，我正在尝试删除多选逻辑。

目前“全部”过滤器处于活动状态，然后当我选择过滤器例如“狗”时，只会显示狗，但是当我选择“猫”时，“狗”和“猫”会显示。

我想要做的是，如果我选择'猫'，那么只有'猫'秀。

这是我目前的代码：

<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( {
                showOnLoad: "featured",
                layoutMode: 'grid', // 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 btccup doombencup doomben10000 qldoaks aamistradbroke"]').removeClass('active');
                    // Remove "all" from string
                    filterString = filterString.replace('all','');
                    if(!$t.hasClass('active')){
                        // Check checkbox
                        $t.addClass('active');// adds highlight
                        // 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>