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/

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

1 个答案: