javascript - 如何使用jquery过滤同位素div的子集？

Question

我无法通过单击主部分中的 div 来过滤子部分中的同位素 div。我怀疑我错过了一些简单的东西，因为工作过滤器单击和非工作类别单击的选项在调试器中看起来相同。也许 div 需要像 li 那样的超链接？我尝试过，但没有成功。

Working Fiddle (Refer to Answer)

我希望能够删除过滤器栏并使用类别 div 来过滤子集。

Javascript:

$(function () {

                var $containerParent = $('#containerParent');
                var $optionSets = $('#options .option-set'),
                    $optionLinks = $optionSets.find('a');

                $optionLinks.click(function () {
                    var $this = $(this);
                    // don't proceed if already selected
                    if ($this.hasClass('selected')) {
                        return false;
                    }
                    var $optionSet = $this.parents('.option-set');
                    $optionSet.find('.selected').removeClass('selected');
                    $this.addClass('selected');

                    // make option object dynamically, i.e. { filter: '.my-filter-class' }
                    var options = {},
                        key = $optionSet.attr('data-option-key'),
                        value = $this.attr('data-option-value');
                    // parse 'false' as false boolean
                    value = value === 'false' ? false : value;
                    options[key] = value;
                    
                    // otherwise, apply new options
                    $containerParent.isotope(options);                    

                    return false;
                });

                // element click
                $containerParent.delegate('.element', 'click', function () {

                    //$(this).toggleClass('large');
                    //$containerParent.isotope('reLayout');

                    var arr = $(this).context.className.match(/\S+/gi)
                    var options = {},
                        key = 'Filter',
                        value = '.' + arr[1];
                    value = value === 'false' ? false : value;
                    options[key] = value;

                    var $containerChild = $('#containerChild');
                    $containerChild.isotope(options);
                    document.location = "#filter";
                    alert("How do I filter subset? " + value);
                });
            });

屏幕截图:

Answer 1

修复了它 - 我使用的是“过滤器”而不是“过滤器”。我习惯了 C#/不区分大小写和编译器!我已经更新了 fiddle 并留下了这个问题，以防它可以帮助其他人开始使用同位素。