通过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>