Question

我正在尝试将两个自定义的MixItUp过滤脚本结合在一起。一个集成bootstrap.datepicker以根据日期范围进行过滤，另一个扩展框架以根据下拉框中的活动项进行过滤。

我遇到了传递给mixItUp（）过滤器函数的参数的问题。它似乎作为[object，Object]传递，并且与工作版本一致。

Bootstrap Datepicker：我自己开始使用它并且作为单个过滤器运行良好：http://codepen.io/EricBintner/pen/wGWgpX

- ＆amp; -

从下拉框中过滤：此示例评论很好，但结构比我通常处理的更复杂： http://codepen.io/patrickkunka/pen/Fqocw

此下拉列表构建在init函数上，该函数使用var this 。

init: function() {
        var self = this;
        ...
}

我已经完成了所有工作并成功地使用了mixItUp（）函数。我将来自datepicker的事件监听器与下拉事件侦听器放在一起。当使用“self”变量传递时，日期范围参数中的某些内容必须是正确的。它将参数传递给mixItUp（）函数，然后我将打开console.log，但MixItUp不会以这种方式根据此日期范围进行过滤 - 而是过滤掉所有内容。

这是对下拉脚本的datepicker扩展，似乎有问题。具体来说， self。$ show var是传递给过滤器函数的东西，看起来有些不正确 - 也许我在太多地方粘贴了“self”：

    filterDates: function() {
            var self = this;
            self.startDay = self.$startDate.val();
            self.endDay = self.$endDate.val();

if (self.endDay == 0) {
                return false
            } else {
                self.$targets = $('#mixContainer').find('.mix');
                self.$show = self.$targets.filter(function() {
                    self.date = self.$targets.attr('data-date').replace(/(\d\d\d\d)(\d\d)(\d\d)/g, '$1$2');
                    return (self.date >= self.startDay) && (self.date <= self.endDay);
                });
                console.log(self.$show)      // says [object, Object]
                self.parseFilters();
                return self.$show;          
            } 
         },

无论如何，我认为我非常接近所以希望这对这里的人来说很容易。

以下是我创建的完整codepen： http://codepen.io/EricBintner/pen/VaawgX （这无法根据日期范围进行过滤）

感谢您的帮助!!

其他资源：https://mixitup.kunkalabs.com/support/topic/best-way-to-filter-based-on-provided-date-ranges/

Answer 1

这是工作代码： http://codepen.io/EricBintner/pen/NNbGMX

有些事情已被重建，所以没有简单的答案。感谢那些帮助过的人。

这个新方法取代了以前版本中的两种方法：

parseCategoryFilters: function () {

    var self = this;
    self.groups.each(function ( idx, filter ) {

        // If this filter has a value, filter by it
        var filter_value = filter.value || '';
        if ( filter_value.length > 0 ) {
            self.$show = self.$show.filter(function ( idx, target ) {
                return $(target).hasClass(filter_value);
            });
        }

    });

    // Perform final filter
    self.$mixContainer.mixItUp('filter', self.$show, function ( state, instance ) {
        instance._activeFilter = '';
    });

}

根据下拉菜单值和日期范围将mixItUp（）js扩展为过滤器

1 个答案: