使用jquery使用2个下拉选项过滤项目

Question

我正在寻找一种方法来过滤一个项目使用下拉选项。我有两个下拉选项，即按年份和类型过滤。我已经编写了如下代码，但它仍然不能正常工作。

我有一个模式，它可能会让你理解我所说的过滤器是如何工作的。在filter year中选择2020，在filter type中选择type-2。应该有1个数据出现。

此筛选器不要求使用所有筛选器，它只能是1个筛选器(年份或类型)，并且可以同时使用2个筛选器。

有人能帮我解决这个问题吗？

​

$(".filter").each(function(){
$(".filter").change(function()
  {
      var rex = $(this).val();
            if (rex != "All") $(".result-filter .item").show().not('[data-year="' + rex + '"]').hide();
            else $(".result-filter .item").show(); 
  });       
});

.filter-wrapper{
  display: flex;
}

.filter-wrapper #year-filter{
  margin-right: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filter-wrapper">
  <div class="form-group">
  <label for="">Year:</label>
  <select name="" id="year-filter" class="filter">
    <option value="All">All Year</option>
    <option value="2020">2020</option>
    <option value="2019">2019</option>
    <option value="2018">2018</option>
  </select>
</div>
<div class="form-group">
  <label for="">Type:</label>
  <select name="" id="type-filter" class="filter">
    <option value="All">All Type</option>
    <option value="type-1">Type 1</option>
    <option value="type-2">Type 2</option>
    <option value="type-3">Type 3</option>
  </select>
</div>
</div>

<ul class="result-filter">
  <li class="item" data-year="2020" data-type="type-1">
    <h6>2020</h6>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptate!</p>
    <p>Type 1</p>
  </li>
  <li class="item" data-year="2020" data-type="type-2">
    <h6>2020</h6>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <p>Type 2</p>
  </li>
  <li class="item" data-year="2019" data-type="type-2">
    <h6>2019</h6>
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Type 2</p>
  </li>
</ul>

​

Answer 1

尝试使用此解决方案

$(".filter").change(function() {
  var typeFilter = $("#type-filter").val();
  var yearFilter = $("#year-filter").val();
  
  $(".result-filter .item").show();
  
  if(typeFilter !== "All") {
    $(".result-filter .item").not('[data-type="' + typeFilter + '"]').hide();
  }
  
  if(yearFilter !== "All") {
    $(".result-filter .item").not('[data-year="' + yearFilter + '"]').hide();
  }
});

链接到jsfiddle：https://jsfiddle.net/Cuchu/e8m0fLqk/11/

致以问候！