Combinando elementos para filtrar con isótopos.

Actualmente estoy usando Isótopo para filtrar una lista de publicaciones, pero me gustaría poder combinar el método de filtro de enlace estándar y documentado con un elemento de selección, ya que mi segunda lista de filtros es bastante larga.

El bit con el que estoy luchando está tratando con dos tipos distintos de elementos y combinando valores seleccionados en una matriz de opciones . Puedo hacer que los filtros funcionen de forma independiente (código a continuación) pero necesitan trabajar juntos. ¿Cómo puedo combinar las dos acciones diferentes (hacer clic o cambiar) y dos atributos (clase = o valor =) en una matriz de opciones para pasar al filtro de isótopos?

var $container = $('#library'); // select ccskills publications by default $container.isotope({ filter: '.ccskills' }); var $optionSets = $('#library-options .option-set'), $optionLinks = $optionSets.find('a'); $optionLinks.click(function(){ var $this = $(this); // don't proceed if already selected if ( $this.hasClass('selected') ) { return false; } var $optionSet = $this.parents('.option-set'); $optionSet.find('.selected').removeClass('selected'); $this.addClass('selected'); // make option object dynamically, ie { filter: '.my-filter-class' } var options = {}, key = $optionSet.attr('data-option-key'), value = $this.attr('data-option-value'); // parse 'false' as false boolean value = value === 'false' ? false : value; options[ key ] = value; $container.isotope( options ); return false; }); // using the 'chozen' plugin to style my select element $(".chzn-select").chosen().change( function() { var industry = $("option:selected", this).val(); $container.isotope({filter: industry}); } ); 

Necesita una matriz multidimensional, con una dimensión de matriz para cada tipo de filtro que tenga. He hecho eso antes y hay un ejemplo de demostración en vivo aquí !

Ver aqui para los js.

En mi archivo js, ​​estarás interesado en la función final llamada getComboFilters (filtros)

 function getComboFilter( filters ) { var i = 0; var comboFilters = []; var message = []; for ( var prop in filters ) { message.push( filters[ prop ].join(' ') ); var filterGroup = filters[ prop ]; // skip to next filter group if it doesn't have any values if ( !filterGroup.length ) { continue; } if ( i === 0 ) { // copy to new array comboFilters = filterGroup.slice(0); } else { var filterSelectors = []; // copy to fresh array var groupCombo = comboFilters.slice(0); // [ A, B ] // merge filter Groups for (var k=0, len3 = filterGroup.length; k < len3; k++) { for (var j=0, len2 = groupCombo.length; j < len2; j++) { filterSelectors.push( groupCombo[j] + filterGroup[k] ); // [ 1, 2 ] } } // apply filter selectors to combo filters for next group comboFilters = filterSelectors; } i++; } comboFilters.sort(); var comboFilter = comboFilters.join(', '); return comboFilter; } 

Esta función maneja todo el empuje, empalme y clasificación de los diversos conjuntos de matrices de filtros, pero para usarla debe agregarla a su rutina de filtros ... bueno, digo rutinas pero realmente son rutinas porque parece que se llama el método de filtros 2 tiempos separados:

 $container.isotope({ filter: '.ccskills' }); 

y después:

  $container.isotope({filter: .industry}); 

Si va a filtrar tipos juntos, todos sus tipos de filtro tendrán que conocerse entre sí, lo que significa que tendrán que estar dentro del mismo gabinete de javascript y el método de filtro debe llamarse solo una vez y en qué momento se pone a prueba contra todas las condiciones de su tipo de filtro.

utilizando la función getComboFilter (filtros), se llama el método de filtro de combinación de esta manera:

 var $container = $('#library'); var filters = {}; var comboFilter = getComboFilter( filters ); $container.isotope({ filter: comboFilter }); 

Finalmente, la integración completa en su archivo sería algo como esto:

 var $container = $('#library'); var filters = {}; var comboFilter = getComboFilter( filters ); $container.isotope({ filter: comboFilter }); // This next part targets all the possible filter items // ie '.option-set a' just like your example $('.option-set a').click(function(){ // exit directly if filter already disabled if ($(this).hasClass('disabled') ){ return false; } var $this = $(this); var $optionSet = $(this).parents('.option-set'); var group = $optionSet.attr('data-filter-group'); // store filter value in object var filterGroup = filters[ group ]; if ( !filterGroup ) { filterGroup = filters[ group ] = []; } var comboFilter = getComboFilter( filters ); $container.isotope({ filter: comboFilter }); }); function getComboFilter( filters ) { var i = 0; var comboFilters = []; var message = []; for ( var prop in filters ) { message.push( filters[ prop ].join(' ') ); var filterGroup = filters[ prop ]; // skip to next filter group if it doesn't have any values if ( !filterGroup.length ) { continue; } if ( i === 0 ) { // copy to new array comboFilters = filterGroup.slice(0); } else { var filterSelectors = []; // copy to fresh array var groupCombo = comboFilters.slice(0); // [ A, B ] // merge filter Groups for (var k=0, len3 = filterGroup.length; k < len3; k++) { for (var j=0, len2 = groupCombo.length; j < len2; j++) { filterSelectors.push( groupCombo[j] + filterGroup[k] ); // [ 1, 2 ] } } // apply filter selectors to combo filters for next group comboFilters = filterSelectors; } i++; } comboFilters.sort(); var comboFilter = comboFilters.join(', '); return comboFilter; } 

Espero que esto ayude a alguien! La demo es bastante elegante.