похож на аккордеон, но не использует аккордеон

Question

У меня есть 4 раздела div.

<div id= section1> Edit Button
<br/> 
continue button<br/>
</div <br/>

<div id= section2> Edit Button 
<br/> 
continue button<br/>
</div<br/>

<div id= section3> Edit Button 
<br/> 
continue button<br/>
</div<br/>

<div id= section4> Edit Button 
<br/> 
continue button<br/>
</div<br/>

в этом сценарии, когда нажата кнопка продолжения для соответствующего раздела, я перейду к следующему разделу, где пользователь должен вводить ввод в текстовые поля. при нажатии на кнопку «продолжить» я скрываю элементы управления и показываю элемент div, в который записаны все введенные пользователем данные.

при нажатии на кнопку редактирования отобразится раздел элементов управления соответствующего раздела, в котором будут скрыты все остальные разделы элементов управления и кнопки редактирования, в результате чего пользователь сможет ввести только один раздел, но не другие разделы.

так происходит с каждым разделом.

Моя проблема в том, что разделы являются динамическими. Я могу показать или скрыть разделы, поэтому в таком случае, как мне сохранить функциональность кнопки «Продолжить» и «Изменить»?

Мне нужны предложения для достижения этой функциональности.

Answer 1

Назначьте класс для кнопки редактирования и сначала нажмите кнопку продолжения.

Затем напишите обработчик событий для кнопки, сначала спрячьте все, а затем сделайте видимой кнопку, на которую нажали.

Псевдокод:

// hide all button defined by their class name
$(".editButtonClass, .continueButtonClass").hide();

// --> if clicked button is a edit button do your job
if( $(this).hasClass("editButton")) {
    // do your job

    // --> the button which was clicked should be visible
    $(this).show();
}

Это общий подход, поэтому он должен работать для динамических элементов.