从容器内更换同位素过滤器？

Question

我有一个基于同位素的子菜单。单击一个选项时，应过滤掉其他选项按钮。

这很难解释，但你可以在这里看到它的小提琴： http://jsfiddle.net/adamrabbit/YL8gH/42/

在颜色类别中点击蓝色的示例中，所有其他颜色应该消失在稀薄的空气中！应保留在颜色类别中的所有内容都是＆＃34;显示全部＆＃34;和＆＃34;蓝＆＃34;。

对于我的生活，我无法让它发挥作用......但这就是我的尝试。请记住，我在javascript中的唯一经验是在过去几周内通过codeacademy课程开始了....所以事情可能看起来有点不对！

这是最近可能过于复杂的尝试 - 我的第一次尝试只是＆＃34; .hide（）＆＃34;和＆＃34; .show（）＆＃34;未使用的按钮。这段代码不起作用，但你可以看到我的想法。

$(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;
    });

});
});

请注意 - 这是this answer从fiddle mentioned there开始伪造的。

Answer 1

我知道，我对答案非常不耐烦。

无论如何，我得到了一半大部分工作，但我觉得我不喜欢这样，所以我放弃了它。代码仍然（大部分）有用 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;
    });

});
});