0

これは私が質問したいことです: 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');
}
4

1 に答える 1

0

あなたはそれを行うことができます。これが役立つかどうかを確認してください。

$(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/

于 2013-01-21T12:15:07.240 に答える