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