jquery - 基于点击事件的jQuery div过滤

Question

在这里，我有一个过滤 div 元素的脚本。

工作演示在这里

HTML

<div class="nav">
<a href="#" data-category-type="4380" data-category-name="jet">4380</a>

<a href="#" data-category-type="4620" data-category-name="air">4620</a>

<a href="#" data-category-type="5000" data-category-name="india">5000</a>

</div>
<div id="Categories">
    <div class="hide" data-category-type="4380" data-category-name="jet">4380.</div>
    <div class="hide" data-category-type="4620" data-category-name="air">4620.</div>
    <div class="hide" data-category-type="5000" data-category-name="india">5000.</div>
    <div class="hide" data-category-type="4380" data-category-name="jet">4380.</div>
</div>

查询

$('.nav a').on('click', function (e) {
    e.preventDefault();
    var cat = $(this).data('categoryType');
    var nam = $(this).data('categoryName');
    $('#Categories > div').hide();
    $('#Categories > div[data-category-type="'+cat+'"]').show();

});

在这里，我只检查一个条件（数据类别类型），

但是在这里，我想检查这两个条件

1. 数据类别类型
2. 数据类别名称

我怎样才能做到这一点，任何人都可以帮助我。

编辑 这里我还有一个问题，我怎样才能显示所有 div 元素（如果我点击）

<a href="">Show all</a>

谢谢

Answer 1

您可以附加一个条件，例如

$('.nav a').on('click', function (e) {
    e.preventDefault();
    var cat = $(this).data('categoryType');
    var nam = $(this).data('categoryName');
    $('#Categories > div').hide();
    $('#Categories > div[data-category-type="'+cat+'"][data-category-name="'+nam+'"]').show();

});

演示：小提琴

还要检查

var divs = $('#Categories > div');
$('.nav a').on('click', function (e) {
    e.preventDefault();
    var $this = $(this);
    var cat = $this.data('categoryType');
    var nam = $this.data('categoryName');
    divs.filter(':visible').hide();
    divs.filter('[data-category-type="'+cat+'"][data-category-name="'+nam+'"]').show();
});

演示：小提琴