1

// 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 указал аргумент, из-за этого функция вызывается сразу же. Как сделать что функция вызывалась все же по клику.

И еще вопрос, код сверяет есть ли у атрибута элемента определенное значение, если таковое имеется, то он выводит на страничку. Но допустим у одного элемента два значения в атрибуте, одно из которых совпадает с критерием поиска, но почему то такие элементы не выводятся, как исправить?

0

1 ответ 1

2

Как сделать чтобы функция вызывалась все же по клику.

Вы пишите filterWrite("deposit"), что собственно является вызовом функции, чтобы она отрабатывала по клику, нужно передать в обработчик функцию, например так :

withDeposit.addEventListener('click', ()=>( filterWrite("deposit") ));

или так :

withDeposit.addEventListener('click', function(){
  filterWrite("deposit");
});

Но допустим у одного элемента два значения в атрибуте, одно из которых совпадает с критерием поиска, но почему то такие элементы не выводятся, как исправить?

Вы пишете if (filterAttribute == filterSetting), то-есть достаете атрибут с элемента и в данном случае сравниваете его со строкой 'deposit', но когда в атрибуте "два значения", то строка получается такой :'deposit daily', и она не равна 'deposit', поэтому думаю вам подойдет метод indexOf, использовать так :

if (filterAttribute.indexOf(filterSetting) > -1)

Ваш ответ

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

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