过滤2个相同类别的项目（jquery）

Question

这是我想问的一个问题： http://berckmans-designs.nl/filternew/index1.php

我在此处的一些帮助下制作了这个过滤系统，但问题是：我无法从同一类别中选择 2 个项目。 （假设我从“kleur”类别中选择“wit”和“zwart”）

希望你们能帮我完成这项工作。

Javascript：

    $(document).ready(function() {
    $(".series-selector-items > li").click(function() {
        $(this).toggleClass('selected');
        filterItems();
    });
});

function filterItems() {
    var classSelectors = $(".selected").map(function() {
        var cls = this.id.split('-');
        return '.'+cls.splice(2).join('-');
    }).toArray();

    //if no filter, show all
    if(!classSelectors.length){
        $('#items > li').show('slow');
    }

    $('#items > li').filter(classSelectors.join('')).show('slow');

    $('#items > li').not(function() {
        var self = this;
        var showThis = true;
        $.each(classSelectors, function(i,value) {
            if(!$(self).is(value)) {
                showThis = false;
            }
        });
        return showThis;
    }).hide('slow');
}

Answer 1

你可以做到。检查这是否对您有帮助。

$(function() {
$(".series-selector-items > li").click(function() {
    $(this).toggleClass('selected');
    filterItems();
});
});

function filterItems() {
var classSelectors = $(".selected").map(function() {
    var cls = this.id.split('-');
    return '.'+cls.splice(2).join('-');
}).toArray();

if(!classSelectors.length){
    $('#items > li').show('slow');
}
else {
$('#items > li').filter(classSelectors.join(', ')).show('slow');
$("#items > li").filter(":not(" + classSelectors.join(', ') + ")").hide('slow');
}
}

您可以在此处查看演示：http://jsfiddle.net/pitchaip/huhbJ/1/