Показывать количество отфильтрованных элементов на начальной странице загрузки Mixitup - PullRequest
Новая
       20

Показывать количество отфильтрованных элементов на начальной странице загрузки Mixitup

0 голосов
/ 25 февраля 2020

Я использую MixItUp 3 для сортировки и фильтрации элементов и хочу отображать количество элементов в каждой категории фильтров при начальной загрузке страницы. Я уже пробовал пример из SO ( mixitup, подсчитывающий видимые элементы при первоначальном запуске после загрузки страницы ), но его MixItUp 2 и не работал в моем случае.

Я хочу показать отфильтрованные элементы учитываются в каждом контрольном фильтре следующим образом: 

    <div class="controls btn-toolbar d-flex justify-content-between mb-2" role="toolbar" aria-label="Toolbar with button groups">
        <div class="btn-group" role="group" aria-label="First group">
            <button type="button" data-mixitup-control class="control btn btn-secondary badge-pill" data-filter=".filter-1">Filter 1
                <span class="badge badge-light ml-1" id="count1">{Show Items Count}</span>
            </button>
            <button type="button" data-mixitup-control class="control btn btn-secondary badge-pill" data-filter=".filter-2">Filter 2
                <span class="badge badge-light ml-1" id="count2">{Show Items Count}</span>
            </button>
        </div>
    </div>

Предполагается, что он будет отображаться внутри этого диапазона (из приведенного выше примера): 

<span class="badge badge-light ml-1">{Show Items Count}</span>

Пока мой смеситель MixItUp выглядит как это: 

    var mixer = mixitup(containerEl, {
        animation: {
            effects: 'fade translateZ(-100px) stagger(100ms)',
            easing: 'cubic-bezier(0.645, 0.045, 0.355, 1)',
            staggerSequence: function(i) {
                return i % 3;
            },
            duration: 300,
            applyPerspective: false
        },
        selectors: {
            control: '[data-mixitup-control]'
        }
    });

Из других примеров я узнал, что мне нужно использовать state.totalShow, и из документации MixItUp я видел, что есть функциональность load, но Я не нашел решения для своих нужд.

1 Ответ

0 голосов
/ 26 февраля 2020

Я нашел решение, которое, вероятно, написано не самым эффективным и эффективным способом, но оно работает для меня.

Сначала я получаю состояние микшера через 

var state = mixer.getState();

А затем я перебираю объект state.targets и ищу соответствующие селекторы в ClassList.value и складываю их вместе. Затем добавленное значение анализируется в элементе span, который выглядит следующим образом: 

var count1 = 0;
var count2 = 0;

$.each( state.targets, function( index, value ) {
    if (this.classList.value.match('filter-1')) {
        count1 += this.classList.value.match('filter-1').length;
        $('#count1').html(count1);
    }
});

$.each( state.targets, function( index, value ) {
    if (this.classList.value.match('filter-2')) {
        count2 += this.classList.value.match('filter-2').length;
        $('#count2').html(count2);
    }
});
...