0

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

我对传递给 mixItUp() 过滤器函数的参数有疑问。它似乎作为 [object, Object] 传递，这与工作版本一致。

Bootstrap Datepicker：我自己完成了这项工作，并且作为单个过滤器工作得很好：http: //codepen.io/EricBintner/pen/wGWgpX

-- & --

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

这个下拉脚本建立在一个使用 var 的 init 函数上。

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

我已经让一切正常工作并成功地汇集到了 mixItUp() 函数。我将日期选择器中的事件侦听器与下拉事件侦听器放在一起。日期范围参数中的某些内容在与“self”变量一起传递时一定是不正确的。它将参数传递给 mixItUp() 函数，我让 console.log 打印出来，但是 MixItUp 不会以这种方式基于此日期范围进行过滤——而是过滤掉所有内容。

这是似乎有问题的下拉脚本的日期选择器扩展。特别是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;          
            } 
         },

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

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

谢谢您的帮助！！

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

4

1 回答 1

0

这是工作代码： 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 = '';
    });

}

于 2016-03-14T21:43:52.813 回答