Как доработать скрипт?

07 июля 2021, 23:50

Есть скрипт, который по кнопке открывает форму и скроллит на неё. Есть ещё две другие кнопки и две другие формы. Работают аналогично.

<style> 
/*Скрываем блок по ID*/ 
#rec126129438 { 
display:none; 
} 
</style> 
<script> 
$('[href = "#form1"]').click(function() { 
$('#rec126129438').slideToggle("slow", function() { 
if ($(this).is(":visible")) { 
$(document).animate({ 
scrollTop: $(this).offset().top 
}, "slow") 
} 
}); 
});
</script>

Что бы туда добавить, чтобы нажатие одной кнопки не только открывало соответствующую форму, но и скрывало остальные формы? Неважно, открыты они или нет. Т.е. всегда должно отображаться либо 0 форм (начальный вариант), либо одна.

Answer 1

Скрыть можно с помощью перебора элементов по части имени id. В примере ниже используется 'rec':

$('*[id*=rec]:visible').hide();

Разместить код необходимо сразу после вызова обработки клика:

$('[href = "#form1"]').click(function() { 
   $('*[id*=rec]:visible').hide();

Но лучше будет создать для форм какой-то идентификатор отличный от id, например data-type="form" и скрывать по нему. Чтобы не скрыть элементы отличные от форм.

$('div[data-type=form]').hide();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<div id="rec12654684" data-type="form">form1</div> 
<div id="rec12654685" data-type="form">form2</div> 
<div id="rec12654686" data-type="form">form3</div>

Answer 2

Спасибо. Почти работает. Вот код:

$('[href = "#form1"]').click(function() {
$('*[id*=rec126129438]:visible').hide();
$('*[id*=rec126130996]:visible').hide();

аналогично на других кнопках. на второй - формы 1 и 3, на третьей - 1 и 2.

Работает следующим образом: нажал на первую кнопку - открылась первая форма, потом нажал на вторую кнопку - первая форма скрылась, открылась вторая. Всё ок. Но если нажать потом на первую кнопку опять, то первая форма не открывается. Явно что-то ещё добавить надо, но что..

Answer 3

Вот, что получилось. Вот стили:

<style>
#rec126130993 {
display: none;
}
#rec126129438 {
display: none;
}
#rec126130996 {
display: none;
}
</style>

И сам скрипт:

<script>
setTimeout(function () {
$('a[href="#form1"], a[href="#form2"], a[href="#form3"]').off().on('click', function() {
var id = $(this).attr('href').substr(1);
var anchor = $('a[name="' + id + '"]');
var el = anchor.parent().next();
var form_ids = ['rec126130993', 'rec126129438', 'rec126130996'];
for (var i = 0; i < form_ids.length; i++) {
if (el.attr('id') != form_ids[i]) {
$('#' + form_ids[i]).hide();
}
}
$('a[href="#form1"], a[href="#form2"], a[href="#form3"]').html('Выбрать');
if (el.is(":visible")) {
el.hide();
$(this).html('Выбрать');
} else {
el.show();
$(this).html('Скрыть');
$('html, body').animate({scrollTop: anchor.offset().top}, 1000);
}
return false;
});
}, 2000);
</script>