根據下拉菜單的值和日期範圍擴展mixItUp（）js

我試圖結婚兩個自定義的MixItUp過濾腳本。一個將bootstrap.datepicker集成到基於日期範圍的過濾器中，另一個將框架擴展爲基於下拉框中活動項目進行過濾。根據下拉菜單的值和日期範圍擴展mixItUp（）js

我對傳遞給mixItUp（）過濾器函數的參數有問題。它看起來是作爲[object，Object]傳遞的，並且與工作版本一致。

引導日期選擇器：我得到這個工作它自己的，並作爲一個過濾器的偉大工程：http://codepen.io/EricBintner/pen/wGWgpX

- & -

從下拉框中篩選：這個例子是結構比我通常處理的更好： http://codepen.io/patrickkunka/pen/Fqocw

Thi s的下拉腳本是建立在一個初始化函數上的，它使用了一個變量這個。

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

我已經得到了一切正常工作，併成功地爲mixItUp（）函數提供了工具。我使用下拉事件偵聽器從datepicker中放置事件偵聽器。日期範圍參數中的某些內容在使用「self」變量傳遞時不能正確。它將參數傳遞給mixItUp（）函數，並獲取要打印的console.log，但MixItUp不會基於此日期範圍進行過濾 - 而是過濾掉所有內容。

這是datepicker擴展到下拉腳本似乎有問題。。特別是自$顯示無功就是被傳遞給過濾函數什麼似乎畸形的 - 也許我粘貼在太多的地方「自我」：

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/

來源

2016-02-26 Eric_B

這不是重複。 –

這裏是工作代碼： 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-14 21:43:52

根據下拉菜單的值和日期範圍擴展mixItUp（）js

回答

相關問題