Javascript 高级多维过滤器

我看了教程，它几乎正是我需要的，但我不想要复选框，我想要按钮过滤器。 我试图使用教程，但我没有找到任何方法来组合这两个脚本

这是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>

仅返回第一个属性，而不是所有活动属性

// 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.');
  }
}
  });    
});

有什么想法吗

我找到了解决办法：

// 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.');
      }
    }
  });    
});

---

检查此-@SystemixInfotech thks，但我需要2种类型的过滤器。过滤器形状：圆形、三角形、正方形和过滤器颜色：绿色、红色、蓝色。获得圆形或三角形以及绿色或蓝色

// 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.');
      }
    }
  });    
});