Менять изотопный фильтр из контейнера?

0

У меня есть подменю на основе изотопа. При нажатии одной из опций следует отфильтровать остальные кнопки.

Трудно объяснить, но вы можете увидеть его здесь на скрипке: http://jsfiddle.net/adamrabbit/YL8gH/42/

В примере, когда синий цвет нажат в цветовой категории, все остальные цвета должны исчезнуть в воздухе! Все, что должно быть оставлено в цветовой категории, это "показать все" и "синий".

Для жизни меня я не могу заставить это работать... но вот что я пробовал. Пожалуйста, имейте в виду, что мой единственный опыт работы с javascript пробивается через курсы курсов по математике в последние пару недель... так что все может выглядеть немного!

Это последняя, вероятно, смехотворно чрезмерно сложная попытка - моя первая попытка просто ".hide()" и ".show()" неиспользуемые кнопки. Этот код не работает, но вы можете видеть мое мышление.

$(function () {
"use strict";

//Define your containers and option sets
var $container = [$('#button-container'), $('#item-container')],
    $optionSets = [$('#button-options .option-set'), $('#item-options .option-set')],
    $value = [{}, {}];

//Initialize isotope on each container
jQuery.each($container, function (j) {
    var isotopeOptions = eval('(' + (this.attr('isotope-options')) + ')');
    this.isotope(isotopeOptions);
});

//Initialize filter links for each option set
jQuery.each($optionSets, function (index, object) {

    var $optionLinks = object.find('a');

    $optionLinks.click(function () {
        var $this = $(this),
            $optionSet = $this.parents('.option-set'),
            options = [{}, {}],
            key = $optionSet.attr('data-option-key'),
            group = $optionSet.attr('data-filter-group');
        $value[index][group] = $this.attr('data-option-value');

        // close menu and deselect base option if already selected
        if ($this.hasClass('is-checked')) {
            $container[0].isotope({
                filter: '.xxx'
            });
            $optionSets[0].find('.is-checked').removeClass('is-checked');
            return false;
        }

        // change classes
        $optionSet.find('.is-checked').removeClass('is-checked');
        $this.addClass('is-checked');
        if ((index === 1) && ($(this).attr('id') !== 'all')) {
            $optionSet.find('.' + group + 'show').removeClass(group + 'show');
            $optionSet.find('#all').addClass(group + 'show');
            $this.addClass(group + 'show');
        }  else if ((index === 1) && ($(this).attr('id') === 'all')) {
            $optionSet.find('.' + group + 'show').removeClass(group + 'show');
        }

        // show all
        if ($value[index][group] === '.reset') {
            $optionSets[0].find('a').each(function (index) {
                $(this).text($(this).attr('name'));
            });
            $container[0].isotope({
                filter: '.xxx'
            });
            $container[1].isotope({
                filter: ''
            });
            $optionSets[1].find('.is-checked').removeClass('is-checked');
            $optionSets[1].find('#all').addClass('is-checked');

            return false;
        }
        // parse 'false' as false boolean
        var isoFilters = [
            [],
            []
        ],
            newIsoFilters = [];
        for (var prop in $value[index]) {
            isoFilters[index].push($value[index][prop]);
        }
        var selector = [],
            newSelector;
        selector[index] = isoFilters[index].join('');
        newIsoFilters = isoFilters[0].concat(['.' + group + 'show']);
        newSelector = newIsoFilters.join('');

        if ((index === 1) && ($(this).attr('id') !== 'all')) {
            $optionSets[0].find('.is-checked').text($(this).attr('name'));
            options[0][key] = newSelector;
            options[1][key] = selector[1];
        } else if ((index === 1) && ($(this).attr('id') === 'all')) {
            options[0][key] = selector[0];
            options[1][key] = selector[1];
        } else {
            options[index][key] = selector[index];
        }
        if (key === 'layoutMode' && typeof changeLayoutMode === 'function') {
            // changes in layout modes need extra logic
            changeLayoutMode($this, options[index]);
        } else {
            // otherwise, apply new options
            if ((index === 1) && ($(this).attr('id') !== 'all')) {
                $container[0].isotope(options[0]);
                $container[1].isotope(options[1]);
            } else 
                $container[index].isotope(options[index]);

        }
        return false;
    });

});
});

Обратите внимание: это было подделано из этого ответа и начиналось с упомянутой там скрипки.

Теги:
jquery-isotope

1 ответ

0

Я знаю, я так нетерпелив к ответу.

Во всяком случае, я получил половину в основном работы, но решил, что мне не нравится внешний вид, поэтому я бросил его. Код по-прежнему (в основном) полезен http://jsfiddle.net/adamrabbit/YL8gH/34/

оригинальный способ без исчезающих кнопок находится здесь http://jsfiddle.net/adamrabbit/YL8gH/37/

теперь пришло время гадать с кнопкой сортировки.

$(function () {
"use strict";

//Define your containers and option sets
var $container = [$('#button-container'), $('#item-container')],
    $optionSets = [$('#button-options .option-set'), $('#item-options .option-set')],
    $value = [{}, {}];

//Initialize isotope on each container
jQuery.each($container, function (j) {
    var isotopeOptions = eval('(' + (this.attr('isotope-options')) + ')');
    this.isotope(isotopeOptions);
});

//Initialize filter links for each option set
jQuery.each($optionSets, function (index, object) {

    var $optionLinks = object.find('a');

    $optionLinks.click(function () {
        var $this = $(this),
            $optionSet = $this.parents('.option-set'),
            options = [{}, {}],
            key = $optionSet.attr('data-option-key'),
            group = $optionSet.attr('data-filter-group');
        $value[index][group] = $this.attr('data-option-value');

        // close menu and deselect base option if already selected
        if ($this.hasClass('is-checked')) {
            $container[0].isotope({
                filter: '.xxx'
            });
            $optionSets[0].find('.is-checked').removeClass('is-checked');
            return false;
        }

        // change classes
        $optionSet.find('.is-checked').removeClass('is-checked');
        $this.addClass('is-checked');
        if ((index === 1) && ($(this).attr('id') !== 'all')) {
            $optionSet.find('.' + group + 'show').removeClass(group + 'show');
            $optionSet.find('#all').addClass(group + 'show');
            $this.addClass(group + 'show');
        }  else if ((index === 1) && ($(this).attr('id') === 'all')) {
            $optionSet.find('.' + group + 'show').removeClass(group + 'show');
        }

        // show all
        if ($value[index][group] === '.reset') {
            $optionSets[0].find('a').each(function (index) {
                $(this).text($(this).attr('name'));
            });
            $container[0].isotope({
                filter: '.xxx'
            });
            $container[1].isotope({
                filter: ''
            });
            $optionSets[1].find('.is-checked').removeClass('is-checked');
            $optionSets[1].find('#all').addClass('is-checked');

            return false;
        }
        // parse 'false' as false boolean
        var isoFilters = [
            [],
            []
        ],
            newIsoFilters = [];
        for (var prop in $value[index]) {
            isoFilters[index].push($value[index][prop]);
        }
        var selector = [],
            newSelector;
        selector[index] = isoFilters[index].join('');
        newIsoFilters = isoFilters[0].concat(['.' + group + 'show']);
        newSelector = newIsoFilters.join('');

        if ((index === 1) && ($(this).attr('id') !== 'all')) {
            $optionSets[0].find('.is-checked').text($(this).attr('name'));
            options[0][key] = newSelector;
            options[1][key] = selector[1];
        } else if ((index === 1) && ($(this).attr('id') === 'all')) {
            options[0][key] = selector[0];
            options[1][key] = selector[1];
        } else {
            options[index][key] = selector[index];
        }
        if (key === 'layoutMode' && typeof changeLayoutMode === 'function') {
            // changes in layout modes need extra logic
            changeLayoutMode($this, options[index]);
        } else {
            // otherwise, apply new options
            if ((index === 1) && ($(this).attr('id') !== 'all')) {
                $container[0].isotope(options[0]);
                $container[1].isotope(options[1]);
            } else 
                $container[index].isotope(options[index]);

        }
        return false;
    });

});
});

Ещё вопросы

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