Javascript 如何将默认筛选器设置为隐藏div

默认情况下，我只想显示类型为“high”的div

---

有人能告诉我如何设置默认状态而不是全部显示吗？

隐藏类别中的所有div，并显示带有

type=“high”

$（'#Categories>div'）.hide（）；
$（“#Categories>div[data category type=“high”]”）。show（）；
$（'.nav a'）。在（'click'，函数（e）上{
e、 预防默认值（）；
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（）；
});

高的
低的
低的
高的
你能试试吗，我刚刚添加了条件来检查它是否高

$('.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设置style=“display:none”

将div隐藏在$（document.ready）中

使用下面提到的html或javascript


$（'#Categories>div[data category type=low]'）。hide（）；
$（'.nav a'）。在（'click'，函数（e）上{
e、 预防默认值（）；
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（）；
});

高的
低的
低的
高的
您可以使用CSS样式隐藏div，如下所示：

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

   }


});

高
低的
低的
高的

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

   }


});

<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>