通過jQuery鏈接過濾表格行

Question

我搜索了周圍，找不到我的問題的確切解決方案，所以這裏。我試圖通過鏈接點擊隱藏不匹配的行來過濾表的行。

<a class="all">All: 314</a> 
<a class="processing">Processing: 16</a> 
<a class="completed">Completed: 12</a> 
<a class="action">Action Required: 34</a> 
<a class="errors">Errors: 6</a> 

下面是桌子的縮寫版本：

這裏的jQuery的我使用（TBODY避免過濾THEAD和一些隱藏的行）：

$("a.processing").click(function(){ 
    $("table#batch tbody tr:not(.processing)").fadeOut(); 
}); 

$("a.completed").click(function(){ 
    $("table#batch tbody tr:not(.completed)").fadeOut(); 
}); 

$("a.action").click(function(){ 
    $("table#batch tbody tr:not(.actionrequired)").fadeOut(); 
}); 

$("a.error").click(function(){ 
    $("table#batch tbody tr:not(.error)").fadeOut(); 
}); 

的問題在於，一旦你通過一個類過濾，由另一個類再次過濾變得不可能，因爲除了之前過濾的值之外的所有值都被隱藏。這種情況發生在.fadeOut();和.hide();之間

我知道有一個更簡單，更簡單的方法來實現這一點，我似乎無法讓我的腦袋周圍或讓它讓我連續過濾。

Answer 1

您可以使用$(this).attr('class')選擇tr與同班點擊a元素

$('a').click(function() { 
 
    $('#batch tr').hide(); 
 
    $('tr.' + $(this).attr('class') + '').show(); 
 
    if ($(this).attr('class') == 'all') $('table tr').show(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a class="all">All: 314</a> 
 
<a class="processing">Processing: 16</a> 
 
<a class="completed">Completed: 12</a> 
 
<a class="action">Action Required: 34</a> 
 
<a class="errors">Errors: 6</a> 
 
<br> 
 
<table id="batch"> 
 
    <tr class="processing"> <td>Processing</td></tr> 
 
    <tr class="processing"> <td>Processing</td></tr> 
 
    <tr class="processing"> <td>Processing</td></tr> 
 
    <tr class="completed"> <td>Completed</td></tr> 
 
    <tr class="completed"> <td>Completed</td></tr> 
 
    <tr class="action"> <td>Action Required</td></tr> 
 
    <tr class="errors"> <td>Error</td></tr> 
 
</table>