如何在 jQuery 中创建过滤器？

$(".js-filter").on("click", function() {
  let items = $(".item");
  let dataColor = $(this).attr("data-color");
  let dataSugar = $(this).attr("data-sugar");
  let typeBox = $(".type-box");
  let dataType = $(this).attr("data-type");


  if (dataColor) {
    items.hide();
    items.filter("." + dataColor).show();
  } else if (dataType) {
    typeBox.hide();
    typeBox.filter("." + dataType).show();
  } else if (dataSugar) {
    items.hide();
    items.filter("." + dataSugar).show();
  }
});

.jumbotron li {
  cursor: pointer;
  transition: color .3s;
  user-select: none;
}

.jumbotron li:hover {
  color: darkred;
}

.jumbotron li:active {
  color: dodgerblue;
}

.list {
  padding-left: 0;
  list-style: none;
}

.item {
  padding: 15px;
  margin-bottom: 15px;
  background: dodgerblue;
  color: #fff;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <div class="row jumbotron">
    <div class="col-4">
      <h3>Цвет</h3>
      <ul>
        <li class="js-filter" data-color="red">Красное</li>
        <li class="js-filter" data-color="white">Белое</li>
        <li class="js-filter" data-color="rose">Розовое</li>
      </ul>
    </div>

    <div class="col-4">
      <h3>Тип алкоголя</h3>
      <ul>
        <li class="js-filter" data-type="type-cognac">Коньяк</li>
        <li class="js-filter" data-type="type-wine">Вино</li>
        <li class="js-filter" data-type="type-sparkling">Игристое</li>
        <li class="js-filter" data-type="all">Все</li>
      </ul>
    </div>

    <div class="col-4">
      <h3>Сахар</h3>
      <ul>
        <li class="js-filter" data-sugar="semi-sweet">Полусладкое</li>
        <li class="js-filter" data-sugar="sweet">Сладкое</li>
        <li class="js-filter" data-sugar="semi-dry">Полусухое</li>
        <li class="js-filter" data-sugar="dry">Сухое</li>
      </ul>
    </div>
  </div>


  <section class="wrapper row">
    <div class="wine type-box col-4">
      <h2 class="title">Вино</h2>

      <ul class="list">
        <li class="item dry red">
          <div>Вино</div>
          <div>Сухое</div>
          <div>Красное</div>
        </li>
        <li class="item semi-dry white">
          <div>Вино</div>
          <div>Полусухое</div>
          <div>Белое</div>
        </li>
        <li class="item semi-sweet rose">
          <div>Вино</div>
          <div>Полусладкое</div>
          <div>Розовое</div>
        </li>
        <li class="item sweet red">
          <div>Вино</div>
          <div>Сладкое</div>
          <div>Красное</div>
        </li>
      </ul>
    </div>

    <div class="sparkling type-box col-4">
      <h2 class="title">Игристое</h2>

      <ul class="list">
        <li class="item dry red">
          <div>Игристое вино</div>
          <div>Сухое</div>
          <div>Красное</div>
        </li>
        <li class="item semi-dry white">
          <div>Вино</div>
          <div>Полусухое</div>
          <div>Белое</div>
        </li>
        <li class="item semi-sweet rose">
          <div>Вино</div>
          <div>Полусладкое</div>
          <div>Розовое</div>
        </li>
        <li class="item sweet red">
          <div>Вино</div>
          <div>Сладкое</div>
          <div>Красное</div>
        </li>
      </ul>
    </div>

    <div class="cognac type-box col-4">
      <h2 class="title">Коньяк</h2>

      <ul class="list">
        <li class="item french">
          <div>Французский</div>
        </li>
        <li class="item armenian">
          <div>Армянский</div>
        </li>
        <li class="item russian">
          <div>Российский</div>
        </li>
      </ul>
    </div>
  </section>
</div>