Я работаю с isotope.js, чтобы отображать много ящиков, содержащих текст на разных языках. (скрипка) Элементы могут быть отсортированы по языку - после нажатия ссылки элементы с выбранным языком будут отсортированы поверх списка, используя getSortData и этот код:
var $container = $('#container');
$container.isotope({
itemSelector: '.tipp',
getSortData : {
fr : function( $elem ) {
var isFr = $elem.hasClass('fr');
return (!isFr?' ':'');
},
en : function( $elem ) {
var isEn = $elem.hasClass('en');
return (!isEn?' ':'');
},
de : function( $elem ) {
var isDe = $elem.hasClass('de');
return (!isDe?' ':'');
}
// + 20 more languages!!!
}
});
Это прекрасно работает, но список языков будет намного длиннее (24 языка).
Я спрашиваю, можно ли получить данные сортировки из массива или написать функцию, чтобы получить все используемые (языковые) классы как sortData.
Я нашел статью с учебником о такой функции, но этот код не работал для меня:
function createSort(){
var sorts = {};
var $source = jQuery('source'); //from where I will read data
$source.each(function() {
var $element = jQuery(this),
findBy = $element.children('a').data('sort-type'), //element, numerical data, data attribute or a property
key = $element.children('a').data('option-value'); //the name of the element, numerical data, data attribute or a property
//if the sort is based on a css class (an element)
if(findBy === "class"){
sortData[key] = function($elem){return $elem.find('.'+ key).text();};
}
//if the sort is based on a data attribute (in my scenario is a numerical attribute)
if(findBy === "attr"){
sortData[key] = function($elem){return parseInt($elem.attr('data-category-' + key), 10);};
}
});
return sortData;
}
//then I call the function and pass the result to getSortData
var sort_data = createSort(),
$container.isotope({
//more code.
getSortData:sort_data
});
Позже я не хочу работать с навигацией по ссылкам, я буду использовать историю BBB Hash для сортировки элементов по внешней ссылке (например, www.someurl.com/index.htm#sortBy=fr). Поэтому не должно быть никаких nav или link, я хочу получить классы непосредственно из элементов или по крайней мере указать массив языковых классов поверх моего изотопного кода ['fr', 'de', 'en']
В основном это вопрос оптимизации, потому что кажется неэффективным записывать один и тот же фрагмент 24 раза, не так ли?
Снова связавшись с моим, по крайней мере, красочным jsfiddle.
Большое спасибо за любую помощь!
Я не совсем уверен, правильно понял ли вы. Но, не будет ли что-то простое, как это выполнить то, что вы хотите?
var getSortData = {};
['fr', 'en', 'de'].forEach(
function (language) {
getSortData[language] = function (language) {
return function (element) {
return element.hasClass(language) ? '' : ' ';
};
}(language);
});
var $container = $('#container'),
isotopeArguments = { itemSelector: '.tipp',
filter: '*',
layoutMode: 'masonry',
getSortData: { } };
['fr', 'en', 'de'].forEach(
function (language) {
isotopeArguments.getSortData[language] = function (language) {
return function (element) {
return element.hasClass(language) ? '' : ' ';
};
}(language);
});
$container.isotope(isotopeArguments);