结合元素与同位素过滤 [英] Combining elements for filtering with Isotope

问题描述

我目前正在使用 Isotope 过滤出版物列表，但希望能够将标准的、记录在案的链接过滤器方法与 select 元素结合起来，因为我的第二个过滤器列表很长.

I'm currently using Isotope to filter a list of publications, but would like to be able to combine the standard, documented link-filter method with a select element, as my second list of filters is quite long.

我正在努力处理两种不同类型的元素，并且将选定的值组合成一个选项数组.我可以让过滤器彼此独立工作(下面的代码)，但它们需要一起工作.如何将两个不同的操作(单击或更改)和两个属性(类= 或值=)组合到一个选项数组中以传递给同位素过滤器?

The bit I'm struggling with is dealing with two distinct types of element and combining selected values into one option array. I can make the filters work independently of each other (code below) but they need to work together. How can I combine the two different actions (click or change) and two attributes (class= or value=) into one options array to pass to the isotop filter?

    var $container = $('#library');
// select ccskills publications by default
$container.isotope({ filter: '.ccskills' });

var $optionSets = $('#library-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;
    $container.isotope( options );
    return false;
});

    // using the 'chozen' plugin to style my select element
$(".chzn-select").chosen().change(
    function() {
        var industry = $("option:selected", this).val();
        $container.isotope({filter: industry});
    }
);

推荐答案

您需要一个多维数组，每个过滤器类型都有一个数组维度.我以前做过，有一个现场演示示例 在这里！

You need a multi-dimensional array, with an array dimension for each filter type you have. I've done that before and there's a live demo example here!

请参阅此处!对于 js.

编辑(2020 年 2 月):演示和 JavaScript 的链接已更新为 2020 年的回溯机器网址

在我的 js 文件中，您会对名为 getComboFilters( filters ) 的 end 函数感兴趣

In my js file you'll be interested in the end function called getComboFilters( filters )

function getComboFilter( filters ) {
    var i = 0;
    var comboFilters = [];
    var message = [];
    for ( var prop in filters ) {
        message.push( filters[ prop ].join(' ') );
        var filterGroup = filters[ prop ];
        // skip to next filter group if it doesn't have any values
        if ( !filterGroup.length ) {
            continue;
        }
        if ( i === 0 ) {
            // copy to new array
            comboFilters = filterGroup.slice(0);
        }
        else {
            var filterSelectors = [];
            // copy to fresh array
            var groupCombo = comboFilters.slice(0); // [ A, B ]
            // merge filter Groups
            for (var k=0, len3 = filterGroup.length; k < len3; k++) {
                for (var j=0, len2 = groupCombo.length; j < len2; j++) {
                    filterSelectors.push( groupCombo[j] + filterGroup[k] ); // [ 1, 2 ]
                }
            }
            // apply filter selectors to combo filters for next group
            comboFilters = filterSelectors;
        }
        i++;
    }
    comboFilters.sort();
    var comboFilter = comboFilters.join(', ');
    return comboFilter;
}

此函数处理各种过滤器数组集的所有推送、拼接和排序，但要使用它，您需要将其添加到过滤器例程中……好吧，我说例程，但它确实是例程，因为您似乎在调用过滤方法 2 次:

This function handles all of the pushing, splicing and sorting of the various sets of filter arrays but to use it you need to add it to your filter routine... well I say routine but it routines really because you seem to call the filter method 2 separate times:

$container.isotope({ filter: '.ccskills' });

及以后:

 $container.isotope({filter: .industry});

如果您要一起过滤类型，则所有过滤器类型都必须相互了解，这意味着它们必须位于同一个 javascript 外壳中，并且过滤器方法只需要调用一次什么时候根据您的所有过滤器类型条件对其进行测试.

If your going to filter types together all of your filter types are going to have to know about each other, meaning they're going to have to be inside the same javascript enclosure and the filter method needs to be called only once at which time it gets tested against all your filter type conditions.

使用 getComboFilter( filters ) 函数，您可以像这样调用组合过滤器方法:

using the getComboFilter( filters ) function you call the combination filter method like this:

var $container = $('#library');
var filters = {};
var comboFilter = getComboFilter( filters );
$container.isotope({ filter: comboFilter });

最后，完全集成到您的文件中将是这样的:

Finally, the full integration into your file would be somethign like this:

var $container = $('#library');
var filters = {};
var comboFilter = getComboFilter( filters );
$container.isotope({ filter: comboFilter });

// This next part targets all the possible filter items
// i.e. '.option-set a' just like your example

$('.option-set a').click(function(){
        // exit directly if filter already disabled
        if ($(this).hasClass('disabled') ){
            return false;
        }
        var $this = $(this);
        var $optionSet = $(this).parents('.option-set');
        var group = $optionSet.attr('data-filter-group');
        // store filter value in object
        var filterGroup = filters[ group ];
        if ( !filterGroup ) {
            filterGroup = filters[ group ] = [];
        }
        var comboFilter = getComboFilter( filters );
        $container.isotope({ filter: comboFilter });
});
function getComboFilter( filters ) {
    var i = 0;
    var comboFilters = [];
    var message = [];
    for ( var prop in filters ) {
        message.push( filters[ prop ].join(' ') );
        var filterGroup = filters[ prop ];
        // skip to next filter group if it doesn't have any values
        if ( !filterGroup.length ) {
            continue;
        }
        if ( i === 0 ) {
            // copy to new array
            comboFilters = filterGroup.slice(0);
        }
        else {
            var filterSelectors = [];
            // copy to fresh array
            var groupCombo = comboFilters.slice(0); // [ A, B ]
            // merge filter Groups
            for (var k=0, len3 = filterGroup.length; k < len3; k++) {
                for (var j=0, len2 = groupCombo.length; j < len2; j++) {
                    filterSelectors.push( groupCombo[j] + filterGroup[k] ); // [ 1, 2 ]
                }
            }
            // apply filter selectors to combo filters for next group
            comboFilters = filterSelectors;
        }
        i++;
    }
    comboFilters.sort();
    var comboFilter = comboFilters.join(', ');
    return comboFilter;
}

希望这对某人有所帮助！演示非常流畅.

Hope this helps somebody! The demo is pretty slick.

这篇关于结合元素与同位素过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！