Isotope add dynamically getSortData

问题:

I'm trying to use isotope.js on my wordpress theme.
I would sort the object in this way, where "Series,Music,Cultura,Sport" are "filter" generated by the custom taxonomy.

var $container = $j('.containerport');
                    $container.isotope({
                        stamp: '.stamp',
                        itemSelector: '.thumbportfolio',
                        getSortData : {
                            Series : function( $elem ) {
                                var isSeries = $j($elem).hasClass('Series');
                                return (!isSeries?' ':'');
                            },
                            Musica : function( $elem ) {
                                var isMusica = $j($elem).hasClass('Musica');
                                return (!isMusica?' ':'');
                            },
                            Cultura : function( $elem ) {
                                var isCultura = $j($elem).hasClass('Cultura');
                                return (!isCultura?' ':'');
                            },
                            Sport : function( $elem ) {
                                var isSport = $j($elem).hasClass('Sport');
                                return (!isSport?' ':'');
                            }
                        }
                    });

I would create a dynamic getSortData because if I add a new filter it should appear automatically without put hands inside the code.
Is it possibile?
Maybe with an array or a for cycle, but I don't know how to access to the list of the filter through jquery. Thanks!

回答1:

You can access the instance of isotope with $('selector').data('isotope')

e.g.

var isotope = $('selector').data('isotope');

in your specific case: var isotope = $j('.containerport').data('isotope'); or var isotope = $container.data('isotope'); as you have defined $container.

The options are stored on a property called... wait for it... options:

var options = isotope.options;

The getSortData object is purely a property of the options:

var sortData = options.getSortData;

You can simply add named elements using named properties like:

sortData.newSort = function($elem){ /* do something here*/ };

or indirectly like an dictionary using:

sortData["newSort"] = function($elem){ /* do something here*/ };

where "newSort" could also be a variable containing the property name:

var newSortVar = "nameOfPropertyToset";
sortData[newSortVar] = function($elem){ /* do something here*/ };

Here is a screenshot of the F12 Chrome debugger results for a watch variable that held .data('isotope') (taken from a random isotope JSFiddle):

If you need specific help after this, you will need to provide a JSFiddle with your own code.

回答2:

I solved using this function :)

function (sorting) {
                            isotopeArguments.getSortData[sorting] = function (sorting) {
                                return function ($elem) {
                                    return $j($elem).hasClass(sorting) ? '' : ' ';
                                };
                            }(sorting);
                        }