jQuery多重選擇器不合法

Question

我有一個div列表，我想過濾兩組複選框：Type和Category。

當檢查2個類別時，應顯示至少包含1個類別的DIV。

當一個類型被選中時，它應該只顯示該類型的DIV。即使它包含一個檢查類別。

<input type="checkbox" name="type[]" value="Type 1"> 
<input type="checkbox" name="type[]" value="Type 2"> 
<input type="checkbox" name="type[]" value="Type 3"> 

<input type="checkbox" name="category[]" value="1"> 
<input type="checkbox" name="category[]" value="2"> 
<input type="checkbox" name="category[]" value="3"> 
<input type="checkbox" name="category[]" value="4"> 

div的：

<div data-type="Type 1" data-cat="1 4"> 
<div data-type="Type 2" data-cat="1 2 3"> 

我到目前爲止的代碼（僅適用於過濾器類型）：

$('form input:checkbox').change(function(){ 
    var type = []; 
    var checked = $(':checkbox:checked').length; 

    // Hide all 
    $('#videoHolder').children('div').hide(); 

    $(':checkbox:checked').each(function(i){ 
    type[i] = $(this).val(); 
    $('#videoHolder').children('div[data-type="' + type[i] + '"]').fadeIn(); 
    }); 

    // Show all 
    if(checked==0){ 
     $('#videoHolder').children('div').fadeIn(); 
    } 
}); 

Answer 1

您需要手動檢查每個類別屬性。 或者你可能會考慮使用jQuery的regEx插件。

// select only category check box-es!! 
$(':checkbox:checked').each(function(i, checkBox){ 

    var search = $(checkBox).val(); 

    $('#videoHolder').children('div').each(function(index, divTag) { 
     var category = $(divTag).attr("data-cat"); 
     var dataType = $(divTag).attr("data-type"); 

    if (isOfType(search, dataType) || containsCategory(search, category)) 
     $(divTag).fadeIn(); 
    }); 
    });