Как я могу использовать 2 выпадающих фильтра с bootstrap 4 в html

Question

Я работаю над сайтом, на котором есть страница «Проекты». На этой странице они показывают все свои готовые проекты, чтобы показать их клиентам. Теперь они хотят 2 фильтра к нему. 1 для «типа обслуживания» и 1 для «типа структуры». Я хочу, чтобы он был внутри выпадающего списка, но, похоже, он работает только с «элементом», а не с «списком данных», который я сейчас использую. Но проблема с атрибутом «data-list» заключается в том, что он работает только для 1 фильтра.

Не могу понять, как я могу это сделать ... Но должен быть способ, верно?

Заранее спасибо! ГРЦ

Answer 1

Этот метод сопоставляет имена классов со значениями, найденными в атрибуте списка данных в обоих полях выбора. Используемые здесь логические операторы помогут вам выбрать между исключительным или включающим условием.

$(document).ready(function(){

$('select').on('change',function(){
var struct=$('.structure').find(':selected').attr('data-list');
var serv=$('.service').find(':selected').attr('data-list');
$('.project').each(function() {
var classList = $(this).attr('class').split(/\s+/);
//console.log(classList);
if(struct==='all' && serv==='all') {
$('.project').show();
} else if(struct==='all' || serv==='all') {
$(this).toggle((classList.includes(struct) || classList.includes(serv)));
} else{
$(this).toggle((classList.includes(struct) && classList.includes(serv)));
}
});

});
});

img{
width:150px;
height:150px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select name="project" class="structure">
    <option data-list="all">--Filter by Structure--</option>
    <option data-list="hotel">Hotels</option>
    <option data-list="house">Houses</option>
    <option data-list="office">Office</option>
    <option data-list="theater">Theaters</option>
</select>
<select name="service" class="service">
    <option data-list="all">--Filter by Service--</option>
    <option data-list="Deco">Deco</option>
    <option data-list="Design">Design</option>
    <option data-list="Construction">Construction</option>
    <option data-list="Lighting">Lighting</option>
</select>
<div class="container-fluid">
<div class="col-md-12">
<div class="row">

<div class="col-md-3 project hotel Construction">
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/commons/c/ce/H%C3%B4tel_du_Lac_Tunis.jpg">

</div>

<div class="col-md-3 project house Construction">
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/commons/b/b0/Teremok_%28Talashkino%3B_2013-11-10%29_02.JPG">

</div>
<div class="col-md-3 project theater Lighting">
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/commons/7/71/Palais_Garnier._December_5%2C_2010.jpg">
</div>
<div class="col-md-3 project office Lighting">
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/London_MMB_%C2%BB093_15_Westferry_Circus.jpg/640px-London_MMB_%C2%BB093_15_Westferry_Circus.jpg">
</div>
<div class="col-md-3 project house Deco">
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/commons/8/85/The_16_house_on_the_Beautiful_Street_from_Bucharest_%28Romania%29_1.jpg">

</div>
</div>
<div class="row">
<div class="col-md-3 project hotel Design">
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/commons/0/07/Toru%C5%84%2C_Hotel_Polonia.jpg">
</div>
</div>
</div>
</div>

Если вы ищете хороший плагин, я предлагаю MixItUp или iSotope .