使用MixItUp過濾動態數據

我想過濾使用MixItUp在AJAX回調方法中動態創建的數據。我有10個部分，每個部分都有一個或多個過濾器。我面臨的問題是，當我點擊一個部分的過濾器時，所有其他部分的數據都被隱藏起來。當我檢查DOM時，覆蓋顯示沒有阻止沒有發生。過濾器值都是唯一的。使用MixItUp過濾動態數據

// The "bindHandlers" method will listen for whenever a button is clicked. 
bindHandlers: function() { 
    var self = this; 
    self.$filters.on('click', 'a', function (e) { 
     self.parseFilters(); 
    }); 
}, 

parseFilters: function() { 
    var self = this; 
    // loop through each filter group and grap the active filter from each one. 
    for (var i = 0, group; group = self.groups[i]; i++) { 
     group.active = []; 
     group.$inputs.each(function() { 
      if ($(this).find('.selected').length > 0) { 
       group.active.push($(this).attr('data-filter')); 
      } 
     }); 
    } 
    self.concatenate(); 
}, 

concatenate: function() { 
    var self = this; 

    self.outputString = ''; // Reset output string 

    for (var i = 0, group; group = self.groups[i]; i++) { 
     self.outputString += group.active; 
    } 

    // If the output string is empty, show all rather than none:  
    !self.outputString.length && (self.outputString = 'all'); 

    // Send the output string to MixItUp via the 'filter' method:  
    if (self.$container.mixItUp('isLoaded')) { 
     self.$container.mixItUp('filter', self.outputString); 
    } 
}

上面寫的AJAX代碼回調函數和click事件觸發的parseFilter功能，達到連擊和outputString包含正確的過濾器名稱仍僅爲它會隱藏所有其他部分瓷磚這混淆了我。

任何人都可以幫助我。就我的谷歌搜索而言，我們需要設置數據過濾器，並給出與過濾元素的類名相同的值。另外我使用淘汰賽將數據綁定

來源

2015-09-04 Arjun Menon

最後我能做到這一點。我不知道它的完美解決方案和所有，但我做到了這一點。

對於每個部分有兩個div，一個用於篩選按鈕，第二個用於報告拼貼，我給了獨特的類（filter div）和id（報告拼貼），並在AJAX回調函數中綁定了代碼這

function SetSectionOneData() { 

var $container = $('#SectionOneReports'), // Report tiles holding container id. 
$controls = $('.cd-tab-filter'); // Filter button holding div 

$container.mixItUp({ 
    animation: { 
     duration: 700, 
     effects: 'fade translateY(600%) stagger(35ms)', 
     easing: 'cubic-bezier(0.86, 0, 0.07, 1)', 
     reverseOut: true 
    }, 
    controls: { 
     enable: false 
    } 
}); 

$controls.on('click', '.filter', function() { 
    var $btn = $(this), 
     filter = $btn.attr('data-filter'); 
    $btn.addClass('FltrBtn_active'); 
    var btnId = $btn.attr('id'); 
    if (btnId) { 
     var productId = btnId.split('_')[1]; 
     var linkId = btnId.split('_')[2]; 
     $('*[id*=Filter_' + productId + ']:visible').each(function() { 
      if ($(this).attr('id').split('_')[2] != linkId) { 
       $(this).removeClass('FltrBtn_active'); 
      } 
     }); 
    } 
    $container.mixItUp('filter', 'none', function() { 
     $container.mixItUp('filter', filter); 
    }); 
});

}

如果有人發現有更好的/優化的解決方案，請讓我知道。

不管怎樣謝謝大家

來源

2015-09-07 07:24:37

使用MixItUp過濾動態數據

回答

相關問題