如何篩選過濾？

這個想法很簡單，我使用複選框來過濾列表，但我無法弄清楚如何過濾結果。如何篩選過濾？

例如，恐怖電影複選框會返回所有類型爲「恐怖」的電影，但我無法解決如何繼續在「今天，平日或週末」過濾特定日期，只有來自可見的恐怖結果。當點擊一天的類型時，我返回所有有那天類型的結果。

看一看這個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); 
    }); 
});

來源

2016-04-27 Satrop

您可以通過選中的複選框以建立所選元素的類別選擇簡化代碼。

請注意，您應該與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

來源

2016-04-27 14:06:55

這完美的作品！非常感謝你的幫助，你的時間和你的建議 - 鉤住'change'而不是'click'。真的很感激它！ – Satrop

沒問題，很高興幫助 –

你可以得到檢查輸入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

來源

2016-04-27 14:04:15 RRK

而感謝你的幫助和時間！這也有效。 – Satrop

如何篩選過濾？

回答

相關問題