使用 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>

这是表格的缩略版：

<table id="batch">
<tr class="processing">Processing</tr>
<tr class="completed">Completed</tr>
<tr class="action">Action Required</tr>
<tr class="errors">Error</tr>

这是我正在使用的 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') 选择与单击的a 元素具有相同类的tr

$('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>