Скрыть/показать отдельные блоки при клике
Здравствуйте уважаемые, пытаюсь написать маленький скрипт который во время клика по отдельной ссылке должен скрывать или показывать отдельные блоки. Как бы все просто, но у меня не работает. Сам скрипт загружаю после 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> |
Поищи на этом форуме "открывашка"... ;)
|
Цитата:
|
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()
|
laimas,
спасибо за Ваш ответ, как я понял, мне нужно заменить class="ekskurs-tur" на #parent_div, но дальше не могу до конца понять етот код, как мне его применить в своем случаи? |
Цитата:
Достаточно одного обработчика, и чтобы не перечислять кнопки по их селекторам (классам), удобнее обратиться к ним по коллекции родителя. То есть, вместо:
$('.all-btn,.auto,.auto-gd,.avia').click(function() {
//здесь код показанный
})
установить так:
$('#parent_selector a').click(function() {
//здесь код показанный
})
где parent_selector имя id в котором находятся кнопки. Это предпочтительней, так как позволяет добавлять новые кнопки фильтра без изменения js кода. Так понятно? |
Цитата:
|
Цитата:
Как вариант...
<!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>
Вот и добавилась в поиск еще одна открывашка... :D |
ksa, а зачем еще и через data атрибуты практически дублировать классы? Было бы полезным тогда иметь одно имя класса как селектор общий, а в дата атрибутах имя (наборы имен) классов для фильтра.
Да и ради только скрыть/показать оперировать классами ни к чему. |
Цитата:
Цитата:
Цитата:
laimas, вроде у американцев есть поговорка (за точность не ручаюсь) Цитата:
|
| Часовой пояс GMT +3, время: 14:59. |