jquery – 使用Isotope组合元素进行过滤

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

我正在努力解决的问题是处理两种不同类型的元素,并将所选值组合成一个选项数组.我可以使过滤器彼此独立工作(下面的代码),但它们需要协同工作.如何将两个不同的操作(单击或更改)和两个属性(class =或value =)组合到一个选项数组中以传递给isotop过滤器？

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

解决方法

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

见here！对于js.

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

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个单独的时间：

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

然后：

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

如果要一起过滤类型,所有过滤器类型都必须彼此了解,这意味着它们必须在同一个javascript机箱内,并且过滤器方法只需要调用一次,此时它针对您的所有过滤器类型条件进行测试.

使用getComboFilter(filters)函数,您可以调用组合过滤器方法,如下所示：

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

最后,完全集成到您的文件将是这样的一些东西：

var $container = $('#library');
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');
        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,');
    return comboFilter;
}

希望这有助于某人！这个演示很漂亮.