フィルタリングする方法は？

Question

アイデアは簡単ですが、リストをフィルタリングするためにチェックボックスを使用していますが、結果をフィルタリングする方法を考えることができません。

たとえば、ホラー映画のチェックボックスでは、「ホラー」のクラスのすべての映画が返されますが、「今日、平日または週末」の特定の日にフィルタリングを続ける方法はありません目に見える恐怖の結果が原因です。 1日のタイプをクリックすると、その日のタイプのクラスを持つすべての結果が返されます。

は、ここでは、このfiddle

を見ては少し助けを必要と魔法である持っています。

$('.tags').find('input:checkbox').on('click', function() { 
    $('.results > div').hide(); 

    $('.tags').find('input:checked').each(function() { 
    $('.results > div.' + $(this).attr('rel')).addClass('active').show(); 
    }); 

    $('input.dayCheck').on('change', function() { 
    $('input.dayCheck').not(this).prop('checked', false); 
    }); 
}); 

Answer 1

あなたは選ばれた要素のクラスのためのセレクタを構築するためにチェックするチェックボックスを使用して、コードを簡素化することができます。

これを行うには、changeイベントにフックする必要があります。これにより、キーボードのみを使用してナビゲートするユーザーにコードが機能するようになります。

$('.tags input:checkbox').on('change', function() { 
    var classString = $('.tags :checkbox:checked').map(function() { 
     return $(this).data('rel'); 
    }).get().join('.'); 

    var $divs = $('.results > div').toggle(classString == '');  
    if (classString != '') 
     $divs.filter('.' + classString).show(); 
}); 

Working example

Answer 2

あなたは配列として確認入力relを得ることができ、あなたはクラスのセレクタを取得するため.を使用してそれらを結合することができます。

$('.tags').find('input:checkbox').on('click', function() { 
    $('.results > div').hide(); 
    if($(this).hasClass('dayCheck')) 
     $('input.dayCheck').not(this).prop('checked', false); 
    classes = $('.tags').find('input:checked').map(function(){ 
    return $(this).attr('rel'); 
    }).get(); 
    selector = classes.length ? '.' + classes.join('.') : ''; 
    $('.results > div' + selector).addClass('active').show(); 
}); 

DEMO