Получение ID соседнего элемента со схожей маской jquery
Не планировал особенно вникать в jquery, босс затребовал раскрывающееся меню.
Скопировал скрипт для UL LI DIV со SlideUp и SlideDown, все работало отлично - босс говорит не пойдет, можно было сделать в разы проще, а такую конструкцию слишком сложно обслуживать. Потом он привел мне пример: <a class="catalog" id="cat_link_1"><p>Корпусная мебель</p></a> <div class="box" id="cat_link_1"> <a href="#">Пункт1</a> <a href="#">Пункт2</a> <a href="#">Пункт3</a> <a href="#">Пункт4</a> </div> <a class="catalog" id="cat_link_2"><p>Офисная мебель</p></a> <div class="box" id="cat_link_2"> <a href="#">Пункт1</a> <a href="#">Пункт2</a> <a href="#">Пункт3</a> <a href="#">Пункт4</a> </div> После этого были часы томительных поисков в Интернете не имея навыков написания JS кода... и вот что получилось.
$(document).ready (
function () {
$('#cat_div_'+divid).click (
function() {
if ($('#cat_link_'+divid).hasClass('active')) {
$('#cat_link_'+divid).removeClass('active');
$('#cat_link_'+divid).slideUp('medium');
} else {
$('#cat_link_'+divid).addClass('active');
$('#cat_link_'+divid).slideDown('medium');
}
}
);
}
);
Однако очевидно, что где-то напортачил с разметкой или синтаксисом. А может кто-нибудь сможет подсказать вообще по-другому. Задача: Мне необходимо сделать скрипт, который по нажатию на любую <a> с классом .catalog либо с маской по id :: "cat_div_" присваивало следующему диву с маской "cat_link_" и ТЕМ ЖЕ НОМЕРОМ - класс active. Есть идеи? |
посмотрите toggleClass
$(function(){
$(".catalog").click(function(){
$(this).next('div').eq(0).toggleClass('active','medium');
return false;
});
});
|
весьма интересно, но "код сложный" это я про другое говорил, он не хотел чтобы в HTML использовалось UL LI и привел пример через A DIV. Сказал - покурить мануалы на тему выборки по маске.
Мол "сделай, чтобы при нажатии на любой элемент с маской cat_div_# (вместо решетки - номер), элементы cat_link_# (тот же номер) присваивался класс актив. Эту конструкцию сейчас попробую. Интересны пару моментов: 1. зачем нужно eq(0)? 2. я так понимаю, что переменную switch мы просто обозвали medium, и зачем-то вернули ее значение? вот только какая польза нам от булевского значения в переменной toggle? Спасибо за помощь! |
Вот пример:
<head>
<style>
.active{
font-size: 20px;
}
.medium{
font-size: 10px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js">
</script>
<script type="text/javascript">
$(function(){
$(".catalog").click(function(){
$("#cat_div_" + this.id.match(/^cat_link_(\d)+/)[1]).toggleClass('active','medium');
return false;
});
});
</script>
</head>
<body>
<a id="cat_link_1" class="catalog">link 1</a>
<div id="cat_div_1">div 1</div>
<a id="cat_link_2" class="catalog">link 2</a>
<div id="cat_div_2">div 2</div>
<a id="cat_link_3" class="catalog">link 3</a>
<div id="cat_div_4">div 4</div>
<a id="cat_link_4" class="catalog">link 4</a>
<div id="cat_div_3">div 3</div>
</body>
|
Невероятно! Работает!! :D
Думалка зашевелилась, добавил туда slideToggle и... о-жесть! когда жму на кнопку - изначально оно ЗАКРЫВАЕТСЯ(при первом нажатии), а потом уже открывает и закрывает как нужно. |
ну это уже со стилями разбираться
|
Ну вот так оно вроде как правильно должно работать но вообще ничего не делает. Хотя раньше именно по такой методике работало все:
$(document).ready (
function () {
$('.catalog').click (
function() {
if ($("#cat_div_" + this.id.match(/^cat_link_(\d)+/)[1]).hasClass('active')) {
$("#cat_div_" + this.id.match(/^cat_link_(\d)+/)[1]).removeClass('active');
$("#cat_div_" + this.id.match(/^cat_link_(\d)+/)[1]).slideUp('medium');
} else {
$("#cat_div_" + this.id.match(/^cat_link_(\d)+/)[1]).addClass('active');
$("#cat_div_" + this.id.match(/^cat_link_(\d)+/)[1]).slideDown('medium');
}
}
);
}
);
|
попробуй поменять стили с помошью js
|
| Часовой пояс GMT +3, время: 17:20. |