MixItUP Multi Filter

Question

我需要你的帮助，因为我正在寻找一种解决方案来处理MixItUp中的多重过滤器。 所以我使用该网站的Park示例，但我的版本不起作用:)。所以这是我的代码+一个jsfiddle。有人能弄清楚我做错了吗？

所以过滤器正在运行，但只有一个过滤器属性。因此，如果我尝试选择第一个过滤器的一个属性，它将被设置为.active，当我选择第二个过滤器的一个属性时，.active切换到这些属性。 - ＆GT; http://jsfiddle.net/zm3j3/

我想这样做。 - ＆GT; http://mixitup.io/demos/parks

<div id="Filters">
    <ul class="filter_leucht">
        <span class="title">Leuchtentype</span>
        <ul class="">
            <li class="filter" data-dimension="leuchtentype" data-filter="all">All</li>
            <li class="filter" data-dimension="leuchtentype" data-filter="leucht1">Leucht1</li>
            <li class="filter" data-dimension="leuchtentype" data-filter="leucht2">Leucht2</li>
         </ul>
    </ul>


    <ul class="filter_regionen">
        <span class="">Regionen</span>
        <ul class="title">
            <li class="filter" data-dimension="regionen" data-filter="all">All</li>
            <li class="filter" data-dimension="regionen" data-filter="region1">Region1</li>
            <li class="filter" data-dimension="regionen" data-filter="region2">Region2</li>
        </ul>
    </ul>
</div>

<ul id="Referenz" class="layout_list">

    <li class="mix region1 leucht1">
      <a href="#">
                <img src="http://img2.fotoalbum.virgilio.it/v/www1-3/176/176513/304872/IMG_0880-vi.jpg" alt="Projekt 1" title="Projekt 1">
      </a>
    </li>

    <li class="mix region1 leucht2">
      <a href="#">
      <img src="http://i.livescience.com/images/i/000/054/306/i02/beach-health.jpg?1372365869" alt="Projekt 2" title="Projekt 2">
          </a>
    </li>

    <li class="mix region2 leucht2">
      <a href="#">
                <img src="http://img2.fotoalbum.virgilio.it/v/www1-3/176/176513/304872/IMG_0880-vi.jpg" alt="Projekt 1" title="Projekt 1">
      </a>
    </li>

    <li class="mix region2 leucht2">
      <a href="#">
      <img src="http://i.livescience.com/images/i/000/054/306/i02/beach-health.jpg?1372365869" alt="Projekt 2" title="Projekt 2">
          </a>
    </li>

</ul>

我的JS

    $(function(){

        // INSTANTIATE MIXITUP

        $('#Referenz').mixitup({    
            effects: ['fade','blur'], // List of effects 
        });

        // 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.regionen);
            console.info('dimension 2: '+dimensions.leuchtentype);


            $('#Referenz').mixitup('filter',[dimensions.regionen, dimensions.leuchtentype])         

        });

    });

祝你好运