Форум

Chmil · #1 (**permalink**) 19.04.2019, 00:38

Здравствуйте уважаемые, пытаюсь написать маленький скрипт который во время клика по отдельной ссылке должен скрывать или показывать отдельные блоки. Как бы все просто, но у меня не работает. Сам скрипт загружаю после jQuery.
Скрипт:

$(document).ready(function() {

	$(".all-btn").click(function() {
		$(".auto").css({"display":"block"});
        $(".auto-gd").css({"display":"block"});
        $(".avia").css({"display":"block"});
    });
 
    $(".auto-btn").click(function() {
		$(".auto").css({"display":"block"});
        $(".auto-gd").css({"display":"none"});
        $(".avia").css({"display":"none"});
    });
	
	$(".auto-gd-btn").click(function() {
		$(".auto").css({"display":"none"});
        $(".auto-gd").css({"display":"block"});
        $(".avia").css({"display":"none"});
    });
	
	$(".avia-btn").click(function() {
		$(".auto").css({"display":"none"});
        $(".auto-gd").css({"display":"none"});
        $(".avia").css({"display":"block"});
    });
 
});

html:

<a class="all-btn" href="#">All</a>
<a class="auto" href="#">Auto</a>
<a class="auto-gd" href="#">auto-gd</a>
<a class="avia" href="#">avia</a>

<div class="ekskurs-tur">
	<div class="auto">
		auto1
	</div>
	<div class="auto">
		auto2
	</div>
	<div class="auto-gd">
		auto-gd1
	</div>
	<div class="avia">
		avia1
	</div>
	<div class="auto">
		auto3
	</div>
	<div class="avia">
		avia2
	</div>
</div>

ksa · #2 (**permalink**) 19.04.2019, 08:02

Поищи на этом форуме "открывашка"...

Chmil · #3 (**permalink**) 19.04.2019, 08:36

Сообщение от ksa

Поищи на этом форуме "открывашка"...

спасибо за ответ, но по такому запросу вообще ничего не находит, нет ни у кого идей?

laimas · #4 (**permalink**) 19.04.2019, 09:12

Chmil, если ссылки имеют общего родителя, то лучше в нем найти их (по селектору родителя), а затем им всем один обработчик, в котором (к элементу ekskurs-tur лучше по id обращаться, в примере parent_div):

var elm = $('#parent_div').children();
if($(this).hasClass('all-btn')) {
    elm.show();
    return;
}
elm.hide().filter('.'+this.className).show()

Chmil · #5 (**permalink**) 19.04.2019, 09:24

laimas,
спасибо за Ваш ответ, как я понял, мне нужно заменить class="ekskurs-tur" на #parent_div, но дальше не могу до конца понять етот код, как мне его применить в своем случаи?

laimas · #6 (**permalink**) 19.04.2019, 09:32

Сообщение от Chmil

нужно заменить class="ekskurs-tur" на #parent_div

Не обязательно, можно добавить какое угодно имя id, заменить class="ekskurs-tur", на id="ekskurs-tur" если оно не используется css, и т.п.

Достаточно одного обработчика, и чтобы не перечислять кнопки по их селекторам (классам), удобнее обратиться к ним по коллекции родителя. То есть, вместо:

$('.all-btn,.auto,.auto-gd,.avia').click(function() {
    //здесь код показанный
})

установить так:

$('#parent_selector a').click(function() {
    //здесь код показанный
})

где parent_selector имя id в котором находятся кнопки. Это предпочтительней, так как позволяет добавлять новые кнопки фильтра без изменения js кода. Так понятно?

ksa · #7 (**permalink**) 19.04.2019, 09:36

Сообщение от Chmil

но по такому запросу вообще ничего не находит

Видно у нас разный поиск...

ksa · #8 (**permalink**) 19.04.2019, 09:48

Сообщение от Chmil

нет ни у кого идей?

Так идей тут особо и не нужно.

Как вариант...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='https://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
.off {
	display: none;
}
</style>
<script type='text/javascript'>
$(function(){
	$('#filter a').click(function(){
		var type=$(this).data('type');
		var o=$('.ekskurs-tur > div');
		if (type=='all') {
			o.removeClass('off');
			return;
		};
		o.addClass('off');
		o.filter('.'+type).removeClass('off');
	});
	$('.ekskurs-tur > div').addClass('off');
});
</script>
</head>
<body>
<div id='filter'>
	<a class="all-btn" data-type='all' href="#">All</a>
	<a class="auto" data-type='auto' href="#">Auto</a>
	<a class="auto-gd" data-type='auto-gd' href="#">auto-gd</a>
	<a class="avia" data-type='avia' href="#">avia</a>
</div>
<div class="ekskurs-tur">
	<div class="auto">
		auto1
	</div>
	<div class="auto">
		auto2
	</div>
	<div class="auto-gd">
		auto-gd1
	</div>
	<div class="avia">
		avia1
	</div>
	<div class="auto">
		auto3
	</div>
	<div class="avia">
		avia2
	</div>
</div>
</body>
</html>

Вот и добавилась в поиск еще одна открывашка...

laimas · #9 (**permalink**) 19.04.2019, 10:03

ksa, а зачем еще и через data атрибуты практически дублировать классы? Было бы полезным тогда иметь одно имя класса как селектор общий, а в дата атрибутах имя (наборы имен) классов для фильтра.

Да и ради только скрыть/показать оперировать классами ни к чему.

ksa · #10 (**permalink**) 19.04.2019, 10:12

Сообщение от laimas

а зачем еще и через data атрибуты практически дублировать классы?

Классы, как правило, использую как селекторы... Данные храню в data.

Сообщение от laimas

Было бы полезным тогда иметь одно имя класса как селектор общий, а в дата атрибутах имя (наборы имен) классов для фильтра.

Это уже не ко мне, а к автору...

Сообщение от laimas

Да и ради только скрыть/показать оперировать классами ни к чему.

Ты спец - тебе видней.

laimas, вроде у американцев есть поговорка (за точность не ручаюсь)

Цитата:

Есть много способов как ободрать кошку

Форум

Справочник

Discord чат

Курсы javascript