Всем здравствуйте! Пытаюсь решить фильтрацию блоков при помощи data-toggle, хочу сделать фильтр как на сайте DNS. Немалыми усилиями, пришла к этой части. Блоки скрываются и появляется нужная часть. Прошу помощи, т.к. уже сама решить не в силах. Проблемы заключаются в том, что при выводе блоков он не учитывает полное совпадение data-toggle и кнопку показать он выводит после каждого активированного чекбокса. Я не могу даже представить как должны выглядеть условия.
$('.checkbox-filter').ready(function() {
$('.checkbox-input').change(function() {
var dat = $(this).attr('data-toggle');
if ($(this).is(':checked')) {
$('.item-card').addClass('hidden')
$('.' + dat).addClass('visible'); //условие
$(this).closest('.content-wrapper').find('.filter-button-absolute').show();
} else {
$('.item-card').removeClass('hidden');
$('.' + dat).removeClass('visible');
$(this).closest('.content-wrapper').find('.filter-button-absolute').hide();
}
});
});
.hidden {
display: none;
}
.visible {
display: block;
}
.item-card {
flex-basis: 24%;
width: 100%;
height: 300px;
}
.catalog-content {
display: flex;
}
.catalog-filters {
flex-basis: 30%;
}
.catalog-products {
flex-basis: 65%;
}
.catalog-products-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
}
.filter-button-absolute {
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="catalog" id="hacker-list">
<div class="catalog-content">
<div class="catalog-filters">
<h2>Фильтр</h2>
<div class="filter-group">
<h3>Value</h3>
<div class="content-wrapper">
<button class="filter-button-absolute">Показать</button>
<div class="content">
<span class="sort-range">
<input type="text" placeholder="От" name="rangemin">
—
<input type="text" placeholder="До" name="rangemax">
</span>
</div>
</div>
<h3>option</h3>
<div class="content-wrapper">
<button class="filter-button-absolute">Показать</button>
<div class="content">
<span class="sort-range">
<label class="checkbox-filter">
<input type="checkbox" data-toggle="op1" class="checkbox-input">
<span class="checkbox-content">
option1
</span>
</label>
<label class="checkbox-filter">
<input type="checkbox" data-toggle="op2" class="checkbox-input">
<span class="checkbox-content">
option2
</span>
</label>
<label class="checkbox-filter">
<input type="checkbox" data-toggle="op3" class="checkbox-input">
<span class="checkbox-content">
option3
</span>
</label>
</span>
</div>
</div>
<h3>option1</h3>
<div class="content-wrapper">
<button class="filter-button-absolute">Показать</button>
<div class="content">
<span class="sort-range">
<label class="checkbox-filter">
<input type="checkbox" data-toggle="op1.1" class="checkbox-input">
<span class="checkbox-content">
option1.1
</span>
</label>
<label class="checkbox-filter">
<input type="checkbox" data-toggle="op2.1" class="checkbox-input">
<span class="checkbox-content">
option2.1
</span>
</label>
<label class="checkbox-filter">
<input type="checkbox" data-toggle="op3.1" class="checkbox-input">
<span class="checkbox-content">
option3.1
</span>
</label>
</span>
</div>
</div>
<h3>option2</h3>
<div class="content-wrapper">
<button class="filter-button-absolute">Показать</button>
<div class="content">
<span class="sort-range">
<label class="checkbox-filter">
<input type="checkbox" data-toggle="op1.2" class="checkbox-input">
<span class="checkbox-content">
option1.2
</span>
</label>
<label class="checkbox-filter">
<input type="checkbox" data-toggle="op2.2" class="checkbox-input">
<span class="checkbox-content">
option2.2
</span>
</label>
<label class="checkbox-filter">
<input type="checkbox" data-toggle="op3.2" class="checkbox-input">
<span class="checkbox-content">
option3.2
</span>
</label>
</span>
</div>
</div>
<button class="filter-button filter-button-orange">Применить</button>
<button class="filter-button filter-button-grey" data-filter="all">Сбросить</button>
</div>
</div>
<div class="catalog-products">
<div class="catalog-products-wrapper" id="catalog">
<div class="item-card op1.1 op1.2 op1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, quas.
</div>
<div class="item-card op2.1 op.2.2 op2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, alias.
</div>
<div class="item-card op3.1 op3.2 op3">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Totam, voluptates!
</div>
<div class="item-card op1.1 op1.2 op1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, optio.
</div>
</div>
</div>
</div>
</div>
</div>
display:none;
в каждый.content-wrapper
, а потом$(this).closest('.content-wrapper').find('.filter-button-absolute').show()/hide();
.