基於點擊事件的Jquery div過濾

Question

這裏我有一個腳本，它過濾div元素。

Working Demo here

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> 

JQUERY

$('.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(); 

}); 

演示：Fiddle

還要檢查

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(); 
}); 

演示：Fiddle