Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.04.2019, 00:38
Аспирант
Отправить личное сообщение для Chmil Посмотреть профиль Найти все сообщения от Chmil
 
Регистрация: 07.07.2017
Сообщений: 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>
Ответить с цитированием
  #2 (permalink)  
Старый 19.04.2019, 08:02
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,296

Поищи на этом форуме "открывашка"...
Ответить с цитированием
  #3 (permalink)  
Старый 19.04.2019, 08:36
Аспирант
Отправить личное сообщение для Chmil Посмотреть профиль Найти все сообщения от Chmil
 
Регистрация: 07.07.2017
Сообщений: 38

Сообщение от ksa Посмотреть сообщение
Поищи на этом форуме "открывашка"...
спасибо за ответ, но по такому запросу вообще ничего не находит, нет ни у кого идей?
Ответить с цитированием
  #4 (permalink)  
Старый 19.04.2019, 09:12
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 10,439

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()
Ответить с цитированием
  #5 (permalink)  
Старый 19.04.2019, 09:24
Аспирант
Отправить личное сообщение для Chmil Посмотреть профиль Найти все сообщения от Chmil
 
Регистрация: 07.07.2017
Сообщений: 38

laimas,
спасибо за Ваш ответ, как я понял, мне нужно заменить class="ekskurs-tur" на #parent_div, но дальше не могу до конца понять етот код, как мне его применить в своем случаи?
Ответить с цитированием
  #6 (permalink)  
Старый 19.04.2019, 09:32
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 10,439

Сообщение от 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 кода. Так понятно?
Ответить с цитированием
  #7 (permalink)  
Старый 19.04.2019, 09:36
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,296

Сообщение от Chmil
но по такому запросу вообще ничего не находит
Видно у нас разный поиск...
Ответить с цитированием
  #8 (permalink)  
Старый 19.04.2019, 09:48
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,296

Сообщение от 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>


Вот и добавилась в поиск еще одна открывашка...
Ответить с цитированием
  #9 (permalink)  
Старый 19.04.2019, 10:03
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 10,439

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

Да и ради только скрыть/показать оперировать классами ни к чему.
Ответить с цитированием
  #10 (permalink)  
Старый 19.04.2019, 10:12
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,296

Сообщение от laimas
а зачем еще и через data атрибуты практически дублировать классы?
Классы, как правило, использую как селекторы... Данные храню в data.
Сообщение от laimas
Было бы полезным тогда иметь одно имя класса как селектор общий, а в дата атрибутах имя (наборы имен) классов для фильтра.
Это уже не ко мне, а к автору...
Сообщение от laimas
Да и ради только скрыть/показать оперировать классами ни к чему.
Ты спец - тебе видней.

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

Последний раз редактировалось ksa, 19.04.2019 в 10:14.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При клике ссылки, открыть DIV блок, и при клике ещё раз, закрыть его Simon Общие вопросы Javascript 59 28.05.2017 17:31
Добавить/удалить класс при клике. Skrowaks Общие вопросы Javascript 5 02.08.2016 05:08
При клике появлялся новый элемент (бесконечно) Eadweard Элементы интерфейса 3 16.02.2016 07:13
При клике на кнопку переход к якорю и открытие блока Galyanov Элементы интерфейса 19 11.12.2015 20:12
Изменение размера элемента при клике Derekovich Элементы интерфейса 25 05.12.2013 18:45