1

Пытаюсь создать фильтр на 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>

1 ответ 1

1

Я немного упростил Ваш пример для того что бы было проще проиллюстрировать основную идею:

$(".js-filter").on("click", function() {
  const items = $(".item")
  const type = $(this).attr("data-type")
  items.hide()
  items.filter("." + type).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-type="red">Красное</li>
        <li class="js-filter" data-type="white">Белое</li>
        <li class="js-filter" data-type="rose">Розовое</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 red">
          <div>Вино</div>
          <div>Сухое</div>
          <div>Красное</div>
        </li>
        <li class="item white">
          <div>Вино</div>
          <div>Полусухое</div>
          <div>Белое</div>
        </li>
        <li class="item rose">
          <div>Вино</div>
          <div>Полусладкое</div>
          <div>Розовое</div>
        </li>
        <li class="item red">
          <div>Вино</div>
          <div>Сладкое</div>
          <div>Красное</div>
        </li>
      </ul>
    </div>
  </section>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.