0

既存のWebサイトのAZディレクトリを変更しています。これは、jQueryを使用してフィルタリングされたリストです。ALLをクリックすると、すべての部門が表示されます。各セクションAZは、一致するクラスを持つ独自のdiv内にグループ化されます。たとえば、Aで始まるすべての部門には、クラス「A」を持つdivがあります。

GILROYをクリックしたときに、同じ方法でリスト内の追加のアイテムグループを除外する必要があります。これらのリスト項目にクラス「gilroy」を追加しました。

フィルタリングを使用して同様の例を解読しようと数時間を費やした後、私はそれを適切にコーディングする方法がわからないことに気付きました。これは時間に敏感なプロジェクトです。どんな援助や正しい方向への指示も大歓迎です。

私が変更している既存のコードは以下のとおりです。cssとhtmlのjsfiddleリンクを参照してください。

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

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

        if(filterVal == 'ALL') {
            $('div#departments div').addClass('column');
            $('div#departments div div.hidden').fadeIn('fast').removeClass('hidden');
        } else {
            $('div#departments div.column').fadeIn('fast').removeClass('column');

            $('div#departments div div').each(function() {
                if(!$(this).hasClass(filterVal)) {
                    $(this).fadeOut('fast').addClass('hidden');
                } else {
                    $(this).fadeIn('fast').removeClass('hidden');
                }
            });
        } 

        return false;
    });
});

jsfiddle

4

2 に答える 2

0

これは、「Gilroy」や、追加する可能性のある他の同様のフィルターで機能するはずです。空のdivwith クラスGILROYと空のul(以前のバージョンの jsfiddle には既に存在しているように見えた) を使用して、elseブロックに次のスニペットを追加できます。

if (filterVal.length > 1) { //can hard-code this to check for "GILROY" instead, if you want
    var targetList = $('div.' + filterVal + ' ul');
    $('li.' + filterVal.toLowerCase()).each(function() {
        targetList.append($(this));
    });                
}

デモ: http://jsfiddle.net/82Vmw/

于 2013-02-21T20:45:08.790 に答える
0

if-then-elseforに別のケースを追加しますGILROY。この場合、ケースと同じようにすべてをALL表示しますが、 を使用して、.gilroyクラスli要素以外はすべて非表示にし.not('.gilroy')ます。フィルターをリセットするには、変更ごとにshow()すべての要素を確認してください。li

$('div#departments li').show();
if(filterVal == 'GILROY') {
    $('div#departments div').addClass('column');
    $('div#departments li').not('.gilroy').hide();
    $('div#departments div div.hidden').fadeIn('fast').removeClass('hidden');
} else if(filterVal == 'ALL') {
    $('div#departments div').addClass('column');
    $('div#departments div div.hidden').fadeIn('fast').removeClass('hidden');
} else {
    ...
}

デモ: http://jsfiddle.net/8u26c/

于 2013-02-21T20:29:59.430 に答える