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')选择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>

使用jQuery链接过滤表行

1 个答案: