// filter
var withDepositDaily = document.getElementById('with_deposit_daily');
var withDeposit = document.getElementById('with_deposit');
var withDaily = document.getElementById('with_daily');
withDeposit.addEventListener('click', filterWrite("deposit"));
function filterWrite(filterSetting) {
filterBlocks = document.querySelectorAll('.filter_blocks');
for (var i = 0; i < filterBlocks.length; i++) {
filterBlocks[i].style.display = 'none';
};
for (var i = 0; i < filterBlocks.length; i++) {
filterAttribute = filterBlocks[i].getAttribute('data-filter');
console.log(filterAttribute);
if (filterAttribute == filterSetting) {
filterBlocks[i].style.display = 'inline-block';
};
};
}
*{margin:0;padding:0}.container{max-width:1600px;min-height:800px;border:4px solid green;margin:40px auto}.work_title{display:block;width:100%;height:60px;background-color:#1aff1a}.work_title h1{font-size:32px;color:#006700;text-align:center;padding-top:10px}.filter .filter_category ul{margin-top:20px;margin-left:20px}.filter .filter_category ul li{display:inline-block;font-size:20px;margin-right:16px;font-weight:700;cursor:pointer}.filter .filter_all_blocks{margin-top:20px}.filter .filter_all_blocks .filter_blocks{width:300px;height:200px;background-color:green;border-radius:5px;display:inline-block;margin:20px}.filter .filter_all_blocks .filter_blocks p{font-size:18px;color:#fff}
<body>
<div class="container">
<div class="work_title">
<h1>Переключение категорий</h1>
</div>
<div class="filter">
<div class="filter_category">
<ul>
<li id='with_deposit_daily'>C депозитом и ежедневным бонусом</li>
<li id='with_deposit'>С депозитом</li>
<li id='with_daily'>С ежедневным бонусом</li>
</ul>
</div>
<div class="filter_all_blocks">
<div class="filter_blocks" data-filter='deposit'>
<p>С депозитом</p>
</div>
<div class="filter_blocks" data-filter='daily'>
<p>С ежедневным бонусом</p>
</div>
<div class="filter_blocks" data-filter='deposit daily'>
<p>С Депозитоп и Ежедневным бонусом</p>
</div>
<div class="filter_blocks" data-filter='deposit'>
<p>С депозитом</p>
</div>
<div class="filter_blocks" data-filter='daily'>
<p>С ежедневным бонусом</p>
</div>
<div class="filter_blocks" data-filter='deposit daily'>
<p>С Депозитоп и Ежедневным бонусом</p>
</div>
<div class="filter_blocks" data-filter='daily'>
<p>С ежедневным бонусом</p>
</div>
<div class="filter_blocks" data-filter='daily'>
<p>С ежедневным бонусом</p>
</div>
</div>
</div>
</div>
Данный код выводит карточки в зависимости от категорий. Повесил EventListener на элемент, в функции filterWrite указал аргумент, из-за этого функция вызывается сразу же. Как сделать что функция вызывалась все же по клику.
И еще вопрос, код сверяет есть ли у атрибута элемента определенное значение, если таковое имеется, то он выводит на страничку. Но допустим у одного элемента два значения в атрибуте, одно из которых совпадает с критерием поиска, но почему то такие элементы не выводятся, как исправить?