1

我正在研究 mixitup jquery 插件，在这里； http://mixitup.io

我希望使用“公园”演示，它有 2 个维度可供过滤。

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

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

在我的情况下，我实际上需要在每个维度内使用 AND 逻辑，也需要在维度之间使用 AND 逻辑。

如果有人使用过这个 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>
4

1 回答 1

1

我以前没有使用过 mixitup，所以我不能保证这会起作用，但看起来你需要做的是使用filterLogic配置选项（http://mixitup.io/#FilterLogic）。

替换$('#Parks').mixitup('filter',[dimensions.region, dimensions.recreation])为以下内容，它应该适合您。

$('#Parks').mixitup({
  filter: [dimensions.region, dimensions.recreation],
  filterLogic: 'and'
})
于 2013-11-06T12:43:04.237 回答