Question

我有一张桌子，如果某个人是插画家或作家，我可以过滤。

<table>
  <tr class="writer">
    <td>John Doe</td>
    <td>Jan 01, 1980</td>
    <td>jondoe@domain.com</td>
  </tr>
  <tr class="writer illustrator">
    <td>Jane Doe</td>
    <td>Sept 01, 1980</td>
    <td>janedoe@domain.com</td>
  </tr>
  <tr class="illustrator">
    <td>Mel Smith</td>
    <td>Aug 01, 1980</td>
    <td>meeeeel@domain.com</td>
  </tr>
  <tr class="writer">
    <td>Harry Smith</td>
    <td>Dec 01, 1980</td>
    <td>hsmith@domain.com</td>
  </tr>
</table>
<button id="writer">writer</button>
<button id="illustrator">illustrator</button>
<button id="reset">reset</button>

这是jquery

jQuery(function () {
$('#illustrator').click(function () {
    $('table tr.writer').hide();
    $('table tr.illustrator').show();
})
$('#writer').click(function () {
    $('table tr.writer').show();
    $('table tr.illustrator').hide();
})
$('#reset').click(function () {
    $('table tr').show();
})
})

我现在的问题是，如果表行具有相同的类，则该行不会出现。就像这个例子一样，当我点击作家时，Jane Doe不会出现。我该怎么做呢？谢谢！

Answer 1

只需更改隐藏和显示的顺序

jQuery(function () {
    $('#illustrator').click(function () {
        $('table tr.writer').hide();
        $('table tr.illustrator').show();
    })
    $('#writer').click(function () {
        $('table tr.illustrator').hide();
        $('table tr.writer').show();
    })
    $('#reset').click(function () {
        $('table tr').show();
    })
})

演示：Fiddle

如果您想稍微调整一下，可以使用以下内容忽略这些条目：not-selector like

jQuery(function () {
    $('#illustrator').click(function () {
        $('table tr:not(.illustrator)').hide();
        $('table tr.illustrator').show();
    })
    $('#writer').click(function () {
        $('table tr:not(.writer)').hide();
        $('table tr.writer').show();
    })
    $('#reset').click(function () {
        $('table tr').show();
    })
})

演示：Fiddle

支持多种类型的另一种变体是为按钮设置一个处理程序并在其中指定目标类型，如

<button class="trigger" data-target="writer">writer</button>
<button class="trigger" data-target="illustrator">illustrator</button>
<button class="trigger">reset</button>

然后

jQuery(function () {
    $('.trigger').click(function () {
        var target = $(this).data('target');
        if (target) {
            $('table tr:not(.' + target + ')').hide();
            $('table tr.' + target).show();
        } else {
            $('table tr').show();
        }
    })
})

演示：Fiddle

Answer 2

只需尝试以下代码即可。您需要更改编码顺序，如下所示。

 $('#writer').click(function () {
        $('table tr.illustrator').hide();
        $('table tr.writer').show();
    })

http://jsfiddle.net/avmCX/23/

Answer 3

你必须检查元素是否没有你的类

jQuery(function () {
            $('#illustrator').click(function () {
                $('table tr.writer:not(.illustrator)').hide();
                $('table tr.illustrator').show();
            })
            $('#writer').click(function () {
                $('table tr.writer').show();
                $('table tr.illustrator:not(.writer)').hide();
            })
            $('#reset').click(function () {
                $('table tr').show();
            })
        })

过滤表格。如果适用其中一条规则，则显示内容

3 个答案: