如何設置默認篩選器隱藏DIV

Question

<div class="nav"> 
<a href="#" data-category-type="high">high</a> 

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

<a href="#" data-category-name="pizza">pizza</a> 

</div> 
<div id="Categories"> 
    <div class="hide" data-category-type="high" data-category-name="pizza">high</div> 
    <div class="hide" data-category-type="low" data-category-name="pasta">low</div> 
    <div class="hide" data-category-type="low" data-category-name="pizza">low</div> 
    <div class="hide" data-category-type="high" data-category-name="pasta">high</div> 
</div> 

的Javascript：

$('.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(); 
    $('#Categories > div[data-category-name="'+nam+'"]').show(); 

}); 

默認情況下，我只想顯示，類型爲「高」的DIV 可有人請告訴我如何設置默認狀態而不是顯示所有的人？

Answer 1

隱藏類別中的所有div並展示那些與type = "high"

$('#Categories > div').hide(); 
 
$('#Categories > div[data-category-type="high"]').show(); 
 

 
$('.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(); 
 
    $('#Categories > div[data-category-name="'+nam+'"]').show(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="nav"> 
 
<a href="#" data-category-type="high">high</a> 
 

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

 
<a href="#" data-category-name="pizza">pizza</a> 
 

 
</div> 
 
<div id="Categories"> 
 
    <div class="hide" data-category-type="high" data-category-name="pizza">high</div> 
 
    <div class="hide" data-category-type="low" data-category-name="pasta">low</div> 
 
    <div class="hide" data-category-type="low" data-category-name="pizza">low</div> 
 
    <div class="hide" data-category-type="high" data-category-name="pasta">high</div> 
 
</div>

Answer 2

你可以試試，我只是說條件檢查，如果其高

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

    } 


}); 

Answer 3

你可以以兩種方式做到這一點。

1. 爲您不想顯示的div設置style =「display：none」。

2. 隱藏$（document）.ready中的div。

使用下面提到的html或javascript。

$('#Categories > div[data-category-type=low]').hide(); 
 
$('.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(); 
 
    $('#Categories > div[data-category-name="'+nam+'"]').show(); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="nav"> 
 
<a href="#" data-category-type="high">high</a> 
 

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

 
<a href="#" data-category-name="pizza">pizza</a> 
 

 
</div> 
 
<div id="Categories"> 
 
    <div class="hide" data-category-type="high" data-category-name="pizza">high</div> 
 
    <div class="hide" style="display:none" data-category-type="low" data-category-name="pasta">low</div> 
 
    <div class="hide" style="display:none" data-category-type="low" data-category-name="pizza">low</div> 
 
    <div class="hide" data-category-type="high" data-category-name="pasta">high</div> 
 
</div>

Answer 4

您可以隱藏div的使用CSS樣式，如下所示：

<div class="hide" data-category-type="high" data-category-name="pizza">high</div> 
<div style="display: none" class="hide" data-category-type="low" data-category-name="pasta">low</div> 
<div style="display: none" class="hide" data-category-type="low" data-category-name="pizza">low</div> 
<div class="hide" data-category-type="high" data-category-name="pasta">high</div>