0

同様の質問がSOに存在することはよく知っていますが、それはひどく提示され、そのために未回答のままでした.

問題は次のとおりです。このプラグインでマルチフィルタリングを有効にすると行き詰まりました。誰かがそれを行う方法を怒鳴るフィドルを使用して教えてもらえますか?

問題は次のとおりです。lemons をクリックして small をクリックすると、もちろん、小さいレモンが表示されるはずです。ただし、代わりに大きなレモンを使用することにした場合は、同じフィルター カテゴリの以前の「小さな」フィルターをオーバーライドしながら、大きなレモンのみを切り替えて表示する必要があります。

したがって、同じカテゴリのフィルタは互いにスタックするべきではなく、「クリックしてオフにする」チェックボックス スタイルを必要とせずに互いに除外する必要があります。これは可能ですか？

これは私がこの効果を達成するのに最も近いですが、私が説明した問題はまだ残っています

                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

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])            
            });
于 2013-07-18T07:36:44.970 に答える