Question

我正在使用jQuery插件MixItUp对我拥有的内容列表进行一些过滤。

该插件提供了一个开箱即用的multiFilter，但问题是它显示了所有内容，然后当您单击其中一个过滤器时，它会将其从列表中删除，而我想要它以便在您选择一个时过滤器，它只显示一个。如果您单击另一个，它也会显示该内容。 There's a demo有类似于我想要的东西，但它比我需要的更复杂 - 它有两个类别的过滤器，我只需要一个。

在演示中，他们不使用'multiFilter'选项。相反，它们似乎为“过滤器”选项定义了字符串，然后根据单击的过滤器将其吐出。我确实尝试解构他们所做的事情并按照我想要的方式进行改造，但未能真正实现任何目标。

基本上我迷路了，所以希望有人之前玩过这个插件。我只想在正确的方向上踢一脚。我是否需要编写自定义单击功能并忘记使用multiFilter，尝试设置过滤字符串，还是可以自定义默认的multiFilter？

There's a fiddle here with the plugin js added and the default multiFilter functionality

HTML

<div id="filter">
    <span>Filter</span>
    <ul class="filter-list">
        <li data-filter="all" class="filter active"><a href="#">All</a></li>
        <li data-filter="lemon" class="filter"><a href="#">Lemon</a></li>
        <li data-filter="orange" class="filter"><a href="#">Orange</a></li>
        <li data-filter="apple" class="filter"><a href="#">Apple</a></li>
    </ul>
</div>

<ul id="grid">
    <li class="mix lemon">
        <h3>Lemon</h3>
        <p>Some text here</p>
    </li>
    <li class="mix orange">
        <h3>Orange</h3>
        <p>Some text here</p>
    </li>
    <li class="mix apple">
        <h3>Apple</h3>
        <p>Some text here</p>
    </li>
</ul>

JS

$('#grid').mixitup({
    multiFilter: 'true',
    showOnLoad: 'lemon orange apple'
});

Answer 1

我最终浏览了National Parks demo中的脚本并进行了调整，直到我得到了我想要的内容。

我的脚本最终会像这样，以防其他人想要这个。

$(function () {

    // INSTANTIATE MIXITUP

    $('#grid').mixitup({
        effects: ['fade', 'blur']
    });

    // HANDLE MULTI-DIMENSIONAL CHECKBOX FILTERING

    var $filters = $('#filters').find('li');
    var filterString = 'all';

    // Bind checkbox click handlers:

    $filters.on('click', function () {
        var $t = $(this),
        filter = $t.attr('data-filter');

        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 {
            // 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, '');
            };
        };

        // Reset to all if none are active
        if ($filters.filter('.active').size() == 0) {
            $filters.filter('[data-filter="all"]').addClass('active');
            filterString = 'all';
        }

        $('#grid').mixitup('filter', [filterString])
    });

});

Answer 2

您是否尝试将“FilterLogic”选项设置为“和”？

http://mixitup.io/#FilterLogic

Answer 3

嗯，这很简单，让我们说你的容器有id＆＃34; mix-container＆＃34;并且您只想显示2个元素＆＃34; category-1 ＆＃34;和＆＃34; category-2 ＆＃34; ：

if($('#mix-container').length != 0){
    $('#mix-container').mixItUp(
        {
            load: {
                filter: '.category-1, .category-2'
            }
        }
    );


    //To avoid adding ".active" class to your default filters each time you click on a button
    var ok=true;

   //This function is triggred every time you click on a button (after mixitup loads all the container)
    $('#mix-container').on('mixEnd', function(e, state){
        if(ok == true){
            $("ul.option-set li[data-filter='.category-1']").addClass('active');
            $("ul.option-set li[data-filter='.category-2']").addClass('active');
            ok = false;
        }
    });
}

如何使用'mixitup'插件自定义多重过滤？

3 个答案: