在初始页面加载时显示过滤项目的计数 Mixitup答案

【问题标题】：Show count of filtered Items on initial page load Mixitup在初始页面加载时显示过滤项目的计数 Mixitup
【发布时间】：2020-02-25 17:30:21
【问题描述】：

我正在使用 MixItUp 3 对项目进行排序和过滤，并希望在初始页面加载时显示每个过滤器类别中的项目数。我已经尝试过 SO (mixitup counting visible items on initial start after page loading) 中的示例，但它的 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 功能，但我没有找到适合我的解决方案需要。~~

【问题讨论】：

标签： javascript jquery filter mixitup

【解决方案1】：

我找到了一个解决方案，它可能不是以最高性能和最佳实践方式编写的，但它对我有用。

首先，我通过

获取混音器状态

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

【讨论】：

【解决方案2】：

我想出了另一种非常简单但有效的解决方案。我试图在页面加载时使用过滤器来计算数量或返回的结果。过滤器由 url 中的哈希设置...在这种情况下为 #sale 或 #lease。我正在过滤 .sale 或 .lease 的页面加载，我能够使用 var Showing = $('.sale').length 来计算这些类，然后将其用作我的计数。

【讨论】：