同位素过滤

时间:2019-03-05 05:24:49

标签: javascript jquery filter jquery-isotope

我有两个下拉菜单-一个可以选择一个国家/地区,另一个可以选择一个行业。每个行业网格都有与不同国家/地区相关的多个行业名称。 我必须制作一个过滤器,让您选择行业和国家/地区并根据其指定结果

每个行业和国家/地区项目都有一个类

过滤器代码:

var $grid = $('.grid').isotope({
    itemSelector: '.grid-item',     
    percentPosition: true,
    masonry: {
        columnWidth: '.grid-sizer',
        gutter: 23,
    }
});

$('.brand-family .explore-btn .view-filter').click(function(e){
    e.preventDefault();
    var filterValueCountry = $('#ddcountry').val();
    var filterValueIndustry = $('#ddindustry').val();
    filterValue = filterValueCountry + filterValueIndustry;
    $grid.isotope({ filter: filterValue  });
    if($grid.data('isotope').filteredItems.length > 0){
        $('#no-results-container').hide()
    }else{
        $('#no-results-container').show()
    }
});

标记下拉菜单

<select class="selectpicker dropup" id="ddindustry" tabindex="-98" data-dropup-auto="false" data-size="5">

每个选项都有一个值。

网格项

<div class="grid" style="position: relative; height: 2049.43px;">
  <div class="grid-sizer"></div>
   <div class="Shopping Malls 0399142d-764e-45a3-9cd6-00e6da60d770 grid-item" style="position: absolute; left: 0%; top: 0px;">

在每个网格项下列出

<ul>
    <li class="00000000-0000-0000-0000-000000000000 7b604219-8586-40ba-b6c3- 
      2555329e1b72 librandfamilylisting">
</ul>

.grid是所有网格的父类,.grid-item是每个网格具有的类。

每个网格项目还具有所有行业的列表。

以上代码有助于对国家和行业进行过滤,但对根据国家对行业进行过滤则无济于事。

我希望过滤器还过滤每个网格项中的行业列表。

0 个答案:

没有答案