javascript - フィルターに複数の層を作成する - sorting.js

Question

したがって、典型的な JS フィルタリングでは、カテゴリ ABCD を設定し、ギャラリーをそのように並べ替えることができます。

もう一段階追加できるか検討中です。

これで、12 個のブロックを含むギャラリーができました。写真にリンクするものもあれば、ビデオにリンクするものもあります。それらはすべて犬猫と鳥です。

写真またはビデオ間に第 1 レベルのフィルターを設定できるようにしたいと考えています。次に、フィルタリングの次のレイヤーは、犬、猫、鳥などをさらに定義することです。

すべて - 写真 - ビデオ
すべて - 犬 - 猫 - 鳥

ここでは、典型的な 1 レベルのフィルタリングを設定しています。

$(document).ready(function () {
    $('ul#filter a').click(function () {
        $(this).css('outline', 'none');
        $('ul#filter .current').removeClass('current');
        $(this).parent().addClass('current');

        var filterVal = $(this).text().toLowerCase().replace(' ', '-');

        if (filterVal == 'all') {
            $('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden');
        } else {

            $('ul#portfolio li').each(function () {
                if (!$(this).hasClass(filterVal)) {
                    $(this).fadeOut('normal').addClass('hidden');
                } else {
                    $(this).fadeIn('slow').removeClass('hidden');
                }
            });
        }

        return false;
    });
});

jsfiddle