javascript - 使用具有多个下拉列表的 jQuery "find"和 "filter"进行过滤

Question

我一直在尝试为客户网站上具有多个下拉菜单的页面制作一些过滤器选项。我可以让它工作，但是当我选择一个选项时它总是会重置过滤。我需要他们“一起”工作。它用于过滤酒店的房间(那里的房间不多)。

所以第一个下拉列表是一个房间可以容纳的人数，然后是要租的房间类型，最后是那个房间/房子里的卧室数量。

用户可以使用所有 3 个下拉菜单来过滤他的结果，也可以只使用 1 个。随他喜欢。他必须能够在第一个下拉列表中选择“3”，然后它会过滤所有内容以在结果框中仅显示最多“3”的房间。之后，如果他在第二个下拉列表中选择“Studios”，需要记住他选择了“3”作为适合房间的人数，但也要记住他现在刚刚选择了“Studios” , 因此它应该显示最多可容纳 3 人的工作室。等

我想你明白了。这是我的 HTML 代码:

<select class="bedroom-min">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

<select class="type">
  <option value="all">Select...</option>
  <option value="casitas">Casitas</option>
  <option value="studios">Studios</option>
  <option value="dorm">Dorm</option>
</select>

<select class="bedrooms">
  <option value="all">Select...</option>
  <option value="1">1 bedroom</option>
  <option value="2">2 bedrooms</option>
</select>

<div class="property-load-section">
  <div class="property-item" data-bedrooms="5" data-type="casitas" data-bed="1">Room #529</div>
  <div class="property-item" data-bedrooms="4" data-type="studios" data-bed="2">Room #737</div>
  <div class="property-item" data-bedrooms="3" data-type="dorm" data-bed="2">Room #123</div>
  <div class="property-item" data-bedrooms="2" data-type="studios" data-bed="2">Room #126</div>
  <div class="property-item" data-bedrooms="1" data-type="casitas" data-bed="1">Room #523</div>
</div>

这是 jQuery 代码:

//Filtering for number of person that can sleep in that room
$("select").change(function() {
  var minValue = $('select.bedroom-min').val();
  $('.property-load-section').find('.property-item').filter(function () {
    return $(this).attr('data-bedrooms') < minValue;
  }).fadeOut('fast');
  $('.property-load-section').find('.property-item').filter(function () {
    return $(this).attr('data-bedrooms') >= minValue;
  }).fadeIn('fast');
});

//Filtering for type of rooms
$("select.type").change(function() {
    var roomType = $('select.type').val();
  $('.property-load-section').find('.property-item').filter(function () {
    return $(this).attr('data-type') != roomType;
  }).fadeOut('fast');
});

//Filtering for the number of bedrooms
$("select.bedrooms").change(function() {
    var roomBed = $('select.bedrooms').val();
  $('.property-load-section').find('.property-item').filter(function () {
    return $(this).attr('data-bed') != roomBed;
  }).fadeOut('fast');
});

这是一个 CodePen 链接:https://codepen.io/anon/pen/bRxXVK?editors=1010

谁能帮我解决这个问题？我对 javascript/jQuery 很陌生。非常感谢

Answer 1

我建议对每个选择的更改事件执行相同的逻辑，在该逻辑中，您应该同时检查所有三个过滤选项。在 type 和 bedrooms 的情况下，还应考虑值 "all"，因为它是一个特殊值，不会相等到您设置的 data- 属性。

话虽如此，这里是修改后的 JavaScript 代码:

//call the same function for each select's change event
$("select.bedroom-min, select.type, select.bedrooms").change(updateRooms);

function updateRooms() {
  //get all the values
  var minValue = $('select.bedroom-min').val();
  var roomType = $('select.type').val();
  var roomBed = $('select.bedrooms').val();

  $('.property-load-section')
    .find('.property-item')
    .hide()
    .filter(function () {
      var okMinBedrooms = $(this).attr('data-bedrooms') >= minValue;

      var okRoomType = true;
      if(roomType !== "all"){
        okRoomType = $(this).attr('data-type') === roomType;
      }

      var okRoomBed = true;
      if(roomBed !== "all"){
        okRoomBed = $(this).attr('data-bed') === roomBed;
      }

      //only fade a room if it satisfies all three conditions
      return okMinBedrooms && okRoomType && okRoomBed;
  }).fadeIn('fast');
}

还有一个 CodePen link .