如何使用jquery过滤同位素div的子集?

时间:2013-12-02 02:59:40

标签: javascript jquery jquery-isotope

我很难通过单击主要部分中的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);
                });
            });

截图: http://i44.tinypic.com/2cy01hs.jpg

1 个答案:

答案 0 :(得分:0)

修正了它 - 我使用'过滤器'而不是'过滤器'。我习惯了c#/ case不敏感和编译器!我已经更新了小提琴并留下了这个问题,以防其他人开始使用同位素。