Javascript 如何使用CSS&；滑动分页

好的，我想完成的是，一旦有人点击顶部的一个按钮，我们会说“Pagado”按钮，我希望这也能显示“Pendiente”结果，而我们会说它们是相关的，我希望它们都能显示出来

请参见下图作为示例：

下面是我试图创建的结果…一旦按下“Pagado”按钮，页面上将只显示带有“Pagado”字样的结果。

下面是示例的代码

---

如何同时显示

Pendiente

和

Pagado

？

只需在html中使用组合的

数据状态

，例如：

行同时具有状态，如

（Pagado）

和

（Pendiente）

在JS中，不匹配确切的字符串，而是查找

包含的
内容，如：

$（'.table tr[data status*=“+$target+'”）.fadeIn（'slow'）
而不是
$（'.table tr[data status=“'+$target+''']”）。fadeIn（'slow'）
添加此js而不是旧js，它将顺利工作

    $(document).ready(function () {

$('.star').on('click', function () {
  $(this).toggleClass('star-checked');
});

$('.ckbox label').on('click', function () {
  $(this).parents('tr').toggleClass('selected');
});

$('.btn-filter').on('click', function () {
  var $target = $(this).data('target');
  if ($target === 'pagado') {
      $('.table tr').css('display', 'none');
      $('.table tr[data-status="' + $target + '"], .table tr[data-status="pendiente"]').fadeIn('slow');
  } else if ($target != 'all') {
      $('.table tr').css('display', 'none');
      $('.table tr[data-status="' + $target + '"]').fadeIn('slow');
  } else {
    $('.table tr').css('display', 'none').fadeIn('slow');
  }
});

}))

我在代码中添加了新的if条件，用于检查目标是否为pagado show this tr plus pendiente tr

if ($target === 'pagado') {
      $('.table tr').css('display', 'none');
      $('.table tr[data-status="' + $target + '"], .table tr[data-status="pendiente"]').fadeIn('slow');
  }

您可以将pagado更改为任何您想要的，或者添加更多的表行、干杯。
非常简单，它工作得非常完美。。。谢谢你抽出时间！