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

Question

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

该插件提供了一个开箱即用的多重过滤器，但问题是它显示了所有内容，然后当您单击其中一个过滤器时，它会将其从列表中删除，而我希望这样当您选择一个过滤器时的过滤器，它只显示那一个。如果您单击另一个，它也会显示该内容。 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])
    });

});