2

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

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

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

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

这里有一个添加插件 js 和默认的 multiFilter 功能的小提琴

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'
});
4

3 回答 3

4

我最终浏览了国家公园演示中的脚本并对其进行了调整，直到我得到了我想要的。

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

$(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])
    });

});
于 2013-06-16T23:51:48.907 回答
1

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

http://mixitup.io/#FilterLogic

于 2013-06-06T17:29:37.053 回答
0

好吧，这很简单，假设您的容器的 id 为“mix-container”，并且您只想显示 2 个元素“ category-1 ”和“ category-2 ”：

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;
        }
    });
}
于 2015-10-06T23:13:12.667 回答