Mixitup高級多維濾波器

Question

我看到this教程，它幾乎正是我所需要的，但我不想要一個複選框，我想要按鈕過濾器。 我試圖使用this教程，但我沒有找到任何方法來結合這兩個腳本。

這是HTML：

<form class="controls" id="Filters"> 
    <!-- We can add an unlimited number of "filter groups" using the following format: --> 

    <fieldset> 
    <h4>Shapes</h4> 
<button class="filter" data-filter=".triangle">Triangle</button> 
<button class="filter" data-filter=".square">Square</button> 
<button class="filter" data-filter=".circle">Circle</button> 
    </fieldset> 

    <fieldset> 
<h4>Colours</h4> 

<button class="filter" data-filter=".green">Green</button> 
<button class="filter" data-filter=".blue">Blue</button> 
<button class="filter" data-filter=".white">White</button> 
    </fieldset> 

    <button id="Reset">Clear Filters</button> 
</form> 

<div id="Container" class="container"> 
    <div class="mix triangle white"></div> 
    <div class="mix square white"></div> 
    <div class="mix circle green"></div> 
    <div class="mix triangle blue"></div> 
    <div class="mix square white"></div> 
    <div class="mix circle blue"></div> 
    <div class="mix triangle green"></div> 
    <div class="mix square blue"></div> 
    <div class="mix circle white"></div> 

    <div class="gap"></div> 
    <div class="gap"></div> 
    <div class="gap"></div> 
    <div class="gap"></div> 
</div> 

這是JavaScript的（我認爲parsingfilters功能需要被砍死 腳本

group.$buttons.filter('.active').attr('data-filter') 

只返回第一個屬性，而不是所有活動的。屬性

// To keep our code clean and modular, all custom functionality will be contained inside a single object literal called "buttonFilter". 

var buttonFilter = { 



// Declare any variables we will need as properties of the object 

    $filters: null, 
    $reset: null, 
    groups: [], 
    outputArray: [], 
    outputString: '', 

    // The "init" method will run on document ready and cache any jQuery objects we will need. 

    init: function(){ 
    var self = this; // As a best practice, in each method we will asign "this" to the variable "self" so that it remains scope-agnostic. We will use it to refer to the parent "buttonFilter" object so that we can share methods and properties between all parts of the object. 

self.$filters = $('#Filters'); 
self.$reset = $('#Reset'); 
self.$container = $('#Container'); 

self.$filters.find('fieldset').each(function(){ 
    self.groups.push({ 
    $buttons: $(this).find('.filter'), 
    active: '' 
    }); 
}); 

self.bindHandlers(); 
    }, 

    // The "bindHandlers" method will listen for whenever a button is clicked. 

    bindHandlers: function(){ 
    var self = this; 

// Handle filter clicks 

self.$filters.on('click', '.filter', function(e){ 
    e.preventDefault(); 

    var $button = $(this); 

    // If the button is active, remove the active class, else make active and deactivate others. 

// $button.hasClass('active') ? 
// $button.removeClass('active') : 
// $button.addClass('active').siblings('.filter').removeClass('active'); 

// If the button is active, remove the active class, else make active and deactivate others. 

    if ($button.hasClass('active')) { $button.removeClass('active')} else {$button.addClass('active')} 




    self.parseFilters(); 
    }); 

    // Handle reset click 

    self.$reset.on('click', function(e){ 
    e.preventDefault(); 

    self.$filters.find('.filter').removeClass('active'); 

    self.parseFilters(); 
}); 
    }, 

    // The parseFilters method checks which filters are active in each group: 

    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.$buttons.filter('.active').attr('data-filter') || ''; 
} 

self.concatenate(); 
    }, 

    // The "concatenate" method will crawl through each group, concatenating filters as desired: 

    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'); 

console.log(self.outputString); 

//^we can check the console here to take a look at the filter string that is produced 

// Send the output string to MixItUp via the 'filter' method: 

    if(self.$container.mixItUp('isLoaded')){ 
    self.$container.mixItUp('filter', self.outputString); 
    } 
    } 
}; 

// On document ready, initialise our code. 

$(function(){ 

    // Initialize buttonFilter code 

    buttonFilter.init(); 

    // Instantiate MixItUp 

    $('#Container').mixItUp({ 
    controls: { 
    enable: false // we won't be needing these 
    }, 
callbacks: { 
    onMixFail: function(){ 
    alert('No items were found matching the selected filters.'); 
    } 
} 
    });  
}); 

任何想法？

THKS

Answer 1

我找到了解決辦法：

// To keep our code clean and modular, all custom functionality will be contained inside a single object literal called "buttonFilter". 

var buttonFilter = { 

    // Declare any variables we will need as properties of the object 

    $filters: null, 
    $reset: null, 
    groups: [], 
    outputArray: [], 
    outputString: '', 

    // The "init" method will run on document ready and cache any jQuery objects we will need. 

    init: function(){ 
    var self = this; // As a best practice, in each method we will asign "this" to the variable "self" so that it remains scope-agnostic. We will use it to refer to the parent "buttonFilter" object so that we can share methods and properties between all parts of the object. 

    self.$filters = $('#Filters'); 
    self.$reset = $('#Reset'); 
    self.$container = $('#Container'); 

    self.$filters.find('fieldset').each(function(){ 
     self.groups.push({ 
     $buttons: $(this).find('.filter'), 
     active: '' 
     }); 
    }); 

    self.bindHandlers(); 
    }, 

    // The "bindHandlers" method will listen for whenever a button is clicked. 

    bindHandlers: function(){ 
    var self = this; 

    // Handle filter clicks 

    self.$filters.on('click', '.filter', function(e){ 
     e.preventDefault(); 

     var $button = $(this); 

     // If the button is active, remove the active class, else make active and deactivate others. 


     if ($button.hasClass('active')) { $button.removeClass('active')} else {$button.addClass('active')} 

     self.parseFilters(); 
    }); 

    // Handle reset click 

    self.$reset.on('click', function(e){ 
     e.preventDefault(); 

     self.$filters.find('.filter').removeClass('active'); 

     self.parseFilters(); 
    }); 
    }, 

    // The parseFilters method checks which filters are active in each group: 



    parseFilters: function(){ 


    window.console && console.log('PARSEFILTER');  

    var self = this; 
window.console && console.log(self); 

    // loop through each filter group and add active filters to arrays 

    for(var i = 0, group; group = self.groups[i]; i++){ 
     group.active = []; // reset arrays 
     group.$buttons.each(function(){ 

     // ici je dois sortir les active 

    window.console && console.log('dans each'); 
     window.console && console.log($(this).hasClass('active'));   
      window.console && console.log($(this).attr('data-filter')); 


     $(this).hasClass('active') && group.active.push($(this).attr('data-filter')); 
     }); 
     group.active.length && (group.tracker = 0); 
    } 

    self.concatenate(); 
    }, 



    // The "concatenate" method will crawl through each group, concatenating filters as desired: 
    concatenate: function(){ 
    var self = this, 
      cache = '', 
      crawled = false, 
      checkTrackers = function(){ 
     var done = 0; 

     for(var i = 0, group; group = self.groups[i]; i++){ 
      (group.tracker === false) && done++; 
     } 

     return (done < self.groups.length); 
     }, 
     crawl = function(){ 
     for(var i = 0, group; group = self.groups[i]; i++){ 
      group.active[group.tracker] && (cache += group.active[group.tracker]); 

      if(i === self.groups.length - 1){ 
      self.outputArray.push(cache); 
      cache = ''; 
      updateTrackers(); 
      } 
     } 
     }, 
     updateTrackers = function(){ 
     for(var i = self.groups.length - 1; i > -1; i--){ 
      var group = self.groups[i]; 

      if(group.active[group.tracker + 1]){ 
      group.tracker++; 
      break; 
      } else if(i > 0){ 
      group.tracker && (group.tracker = 0); 
      } else { 
      crawled = true; 
      } 
     } 
     }; 

    self.outputArray = []; // reset output array 

     do{ 
      crawl(); 
     } 
     while(!crawled && checkTrackers()); 

    self.outputString = self.outputArray.join(); 

    // If the output string is empty, show all rather than none: 

    !self.outputString.length && (self.outputString = 'all'); 

    //console.log(self.outputString); 

    //^we can check the console here to take a look at the filter string that is produced 

    // Send the output string to MixItUp via the 'filter' method: 


     if(self.$container.mixItUp('isLoaded')){ 
     self.$container.mixItUp('filter', self.outputString); 
     } 
    } 
}; 

// On document ready, initialise our code. 

$(function(){ 

    // Initialize buttonFilter code 

    buttonFilter.init(); 

    // Instantiate MixItUp 

    $('#Container').mixItUp({ 
    controls: { 
     enable: false // we won't be needing these 
    }, 
    callbacks: { 
     onMixFail: function(){ 
     alert('No items were found matching the selected filters.'); 
     } 
    } 
    });  
});