Изотоп: написать функцию для getSortData из массива? (оптимизация, скрипка предоставлена)

0

Я работаю с 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.

Большое спасибо за любую помощь!

Теги:
arrays
function
jquery-isotope

1 ответ

0
Лучший ответ

Я не совсем уверен, правильно понял ли вы. Но, не будет ли что-то простое, как это выполнить то, что вы хотите?

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);
  • 0
    спасибо за Ваш ответ. Я не уверен, как реализовать вашу идею в моем коде. Я просто хочу оптимизировать свой код, на данный момент мне нужно написать функцию для каждого из 24 языков (например, "fr: function ($ elem) {...}"). Ваша функция выглядит правильно, но я не могу заставить ее работать. Не могли бы вы взглянуть на мою скрипку ?
  • 0
    @Alani Я пытался взять твой код и добавить его туда, где, я думаю, ты хотел добавить его. Ну, насколько я мог понять.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню