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

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

这很难解释，但你可以在小提琴上看到：

在本例中，当在颜色类别中单击蓝色时，所有其他颜色都应消失在稀薄的空气中！颜色类别中应该剩下的是“全部显示”和“蓝色”

为了我的生命，我不能让它工作。。。但我试过了。请记住，我在javascript方面的唯一经验是在过去几周里通过了codeacademy课程。。。。所以事情看起来有点不对劲

这是最新的一次可能过于复杂的尝试——我的第一次尝试只是“.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;
    });

});
});

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

});
});

---

请注意-这是从开始伪造的。

我知道，我非常渴望得到答案

不管怎么说，我把它弄坏了一半，但我觉得我不喜欢它的样子，所以我把它扔了。代码仍然（大部分）有用

没有消失按钮的原始方法在这里

现在该用一个排序按钮胡闹了