使用 jQuery 的多个下拉列表过滤 div

Question

我目前正在尝试使用 jQuery 实现一个简单的过滤器，我能够通过一个下拉菜单/选择来实现它，但是当添加另一个时，事情会变得混乱。

$("select").change(function () {
  let $elementsToFilter = $("#filterable-elements div");

  let $category = $("#category-filter").val();
  let $type = $("#type-filter").val();

  $elementsToFilter.hide();

  $elementsToFilter.filter(function (index, element) {
    let $el = $(element);

    if ($category === "all" && $type == "all") {
      $elementsToFilter.show();
    } else if ($el.data("category") === $category && $el.data("type") === $type) {
      $el.show();
    }
  });
});

这是我当前的代码，当我尝试独立使用下拉菜单时问题就开始了，它们只有在组合时才有效。因此，如果只想显示 data-category = 1 的 div，除非我也选择一种类型，否则它不起作用。

提前感谢您的任何想法。

编辑：JSFiddle 有问题

Answer 1

给你..你可以添加一些|| OR条件让代码运行即使值等于所有

$("select").change(function () {
  let $elementsToFilter = $("#filterable-elements div");

  let $category = $("#category-filter").val();
  let $type = $("#type-filter").val();

  $elementsToFilter.hide().filter(function (index, element) {
    let $el = $(element);
    return ($el.data("category") === $category || $category == "all") && ($el.data("type") === $type || $type == "all");
  }).show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div>
    <label for="category-filter">Filter by Category</label>
    <select id="category-filter" name="category-filter">
      <option selected value="all">All categories</option>
      <option value="cat 1">Category 1</option>
      <option value="cat 2">Category 2</option>
      <option value="cat 3">Category 3</option>
    </select>
  </div>

  <div>
    <label for="type-filter">Filter by Type</label>
    <select id="type-filter" name="type-filter">
      <option selected value="all">All types</option>
      <option value="type 2">Type 2</option>
      <option value="type 3">Type 3</option>
      <option value="type 5">Type 5</option>
    </select>
  </div>
</div>

<div id="filterable-elements">
  <div data-category="cat 1" data-type="type 3">EL 2</div>
  <div data-category="cat 2" data-type="type 5">EL 3</div>
  <div data-category="cat 3" data-type="type 5">EL 4</div>
  <div data-category="cat 1" data-type="type 2">EL 5</div>
</div>

您需要了解 .each() 和 .filter() 之间的区别

ِ 此外，如果您需要检测是否没有匹配的数据来执行某些操作，您可以查看下一个示例

$("select").change(function () {
  let $elementsToFilter = $("#filterable-elements div");

  let $category = $("#category-filter").val();
  let $type = $("#type-filter").val();
  let divs = $elementsToFilter.hide().filter(function (index, element) {
                let $el = $(element);
                return ($el.data("category") === $category || $category == "all") && ($el.data("type") === $type || $type == "all");
              });
              
              
  if(divs.length < 1){  // if no data matched 
    console.log("NO Data Matched");
    // or show all of them
    // $elementsToFilter.show();
  }else{
    divs.show(); // show the matched elements
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div>
    <label for="category-filter">Filter by Category</label>
    <select id="category-filter" name="category-filter">
      <option selected value="all">All categories</option>
      <option value="cat 1">Category 1</option>
      <option value="cat 2">Category 2</option>
      <option value="cat 3">Category 3</option>
    </select>
  </div>

  <div>
    <label for="type-filter">Filter by Type</label>
    <select id="type-filter" name="type-filter">
      <option selected value="all">All types</option>
      <option value="type 2">Type 2</option>
      <option value="type 3">Type 3</option>
      <option value="type 5">Type 5</option>
    </select>
  </div>
</div>

<div id="filterable-elements">
  <div data-category="cat 1" data-type="type 3">EL 2</div>
  <div data-category="cat 2" data-type="type 5">EL 3</div>
  <div data-category="cat 3" data-type="type 5">EL 4</div>
  <div data-category="cat 1" data-type="type 2">EL 5</div>
</div>