JQuery добавление класса для span или div с неизвестным ID

Question

Извинения за вопрос новичков, но мне интересно, что лучший способ сделать следующее?

У меня есть страница с двумя формами, обе из которых сворачиваются/расширяются, чтобы открыть их поля. Это основной код формы в их сжатом состоянии:

<div class="myForms"> 
    <span class="collapsed" id="form1">Form 1</span> 
    <div id="target-form1" class="collapsed_content" style="display: none;"> 
    . 
    *(form 1 code in here)* 
    . 
    <span class="collapsed" id="form2">Form 2</span> 
    <div id="target-form2" class="collapsed_content" style="display: none;"> 
    . 
    *(form 2 code in here)* 
    . 
</div> 

Если одна из форм щелкнули расширяться, следующие две вещи: (1) класс «открытым» добавляется к пролет для этой формы (2) стиль для формы DIV изменяется на «дисплей: блок»

Так что, если вы, к примеру, нажмите кнопку форма 1 вы в конечном итоге с этим:

<div class="myForms"> 
    <span class="collapsed open" id="form1">Form 1</span> 
    <div id="target-form1" class="collapsed_content" style="display: block;"> 
    . 
    *(form 1 code in here)* 
    . 
    <span class="collapsed" id="form2">Form 2</span> 
    <div id="target-form2" class="collapsed_content" style="display: none;"> 
    . 
    *(form 2 code in here)* 
    . 
</div> 

Скорее чем 'form1', 'form2' и т. д. фактический идентификатор для каждой формы является случайным id ge связанный с плагином collapse/expand (Collapse-O-Matic) (например, 'Id7722'). Идентификатор div совпадает с «target-», добавленным к фронту (например, «target-id7722»).

Теперь моя проблема заключается в том, что когда я открываю, скажем, форму 1, вводим некоторые данные, а затем нажимаю кнопку «Обновить» формы, форма сворачивается (по-видимому, она делает какое-то обновление, которое восстанавливает ее до состояния, страница загружена (т.е. свернута)). Но мне нужна форма для обновления и автоматического расширения, чтобы содержимое сразу было видно.

я могу сделать это хорошо по форме 1 с помощью:

<script type="text/javascript"> 
    setTimeout("jQuery('span#form1').addClass('open');",1); 
    setTimeout("jQuery('#target-form1').css('display','block');",1); 
</script> 

... но мне нужен общий немного JQuery, который будет делать выше для какой бы форме была это кнопка Update щелкнул. Мне не нужно проверять, какая форма на странице открыта, поскольку плагин формы (Formidable Forms) позволяет мне вводить только что приведенный выше фрагмент кода в каждую форму, которую я создаю. Мне просто нужно, чтобы в конечном итоге с версией JQuery этого:

<script type="text/javascript"> 
    setTimeout("jQuery('span id for the current form').addClass('colomat-close');",1); 
    setTimeout("jQuery('div id for the current form').css('display','block');",1); 
</script> 

... а не жестко прописывать в виде идентификатора в пролете и DIV?

Answer 1

<div class="myForms"> 
    <span class="collapsed" id="form1" onclick="$(this).next().addClass('blabla');">Form 1</span> 
    <div id="target-form1" class="collapsed_content" style="display: none;"'> 
</div> 

Возможно ли решение?

Или вы можете:

$(document).on('click', 'span.collapsed', function(){ 
    $(this).next().addClass('blabla'); 
});