Pergunta

I am having difficulty filtering my isotope divs in a sub section by clicking on a div in my main section. I suspect I'm missing something simple as the options from both the working filters click and non working categories click looks the same in debugger. Maybe the div's needs a hyperlink like the li's? I tried this with no luck.

Working Fiddle (Refer to Answer)

I would like to be able to remove the filters bar and use the category divs instead to filter the sub sets.

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

Screenshot:

Foi útil?

Solução

Fixed it - I was using 'Filter' not 'filter'. I'm used to c#/case insensitive and a compiler! I've updated the fiddle and left this question in case it helps anyone else getting started with isotope.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top