与手风琴问题类似，但不使用手风琴

Question

我有 4 个 div 部分。

<div id= section1> Edit Button

 
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();
}

这是一种通用方法，因此它应该适用于动态元素。