切换jQuery按钮时跳转内容

Question

当我切换过滤器“CM”，在第2,3和4行，内容跳跃，我不知道为什么。

$(document).ready(function() { 

     $('.filter_content').mixItUp({ 
      controls: { 
       enable: false // we won't be needing these 
      }, 
      animation: { 
       enable: false 
      }, 
      callbacks: { 
       onMixLoad: function(){ 
        $(this).mixItUp('setOptions', { 
         animation: { 
          enable: true, 
          duration: 400, 
          effects: 'fade', 
          easing: 'ease' 
         }, 
        }); 
       } 
      } 

     }); 

}); 

http://jsfiddle.net/Ly2aj687/

你能不能帮我解决这个问题？

Answer 1

我对mixitup不是很熟悉，但它看起来像是因为你将mixitup应用于filter_content，它包含所有选项，它会将所有选项推到顶端。在这里，我将它附加到模型上，它将起作用，但是现在，当列没有您要过滤的对象时，就会在MixFail上触发。如果您需要查看哪些列没有该选项，则可以使用state。$ targets.context在onMixFail事件中抓取它。

$(document).ready(function() { 

// Initialize buttonFilter code 

    buttonFilter.init(); 

    // Instantiate MixItUp 

    $('.model').mixItUp({ 
     controls: { 
      enable: false // we won't be needing these 
     }, 
     animation: { 
      enable: false 
     }, 
     callbacks: { 
      onMixLoad: function(){ 
       $(this).mixItUp('setOptions', { 
        animation: { 
         enable: true, 
         duration: 400, 
         effects: 'fade', 
         easing: 'ease' 
        }, 
       }); 
      }, 
      onMixFail: function(state){ 
       //fires when there are no matches 
       console.log(state.$targets.context); 
       console.log(state); 
      } 
     } 

    }); 

}); 

JSFiddle