问题
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);
}
来源:https://stackoverflow.com/questions/22174725/isotope-add-dynamically-getsortdata