Question

我正在构建一个用户界面，用户可以输入他们的信息，即姓名，姓氏，联系电话。每次只能输入5个人。这是预先设置的HTML：

<div class="row rootPerson">
    <div class="col-md-1">
        <div class="form-group">
            <label>6</label>
        </div>
    </div>
    <div class="col-md-1">
        <div class="form-group">
            <%-- root person always stays there --%>
        </div>
    </div>
    <div class="col-md-3">
        <div class="form-group">
            <%-- server control --%>
        </div>
    </div>
    <div class="col-md-2">
        <div class="form-group">
            <%-- server control --%>
        </div>
    </div>
    <div class="col-md-3">
        <div class="form-group">
            <%-- server control --%>
        </div>
    </div>
    <div class="col-md-2">
        <div class="form-group">
            <%-- server control --%>
        </div>
    </div>
</div>
<div class="row person2" style="display: none">
    <div class="col-md-1">
        <div class="form-group">
            <label>6</label>
        </div>
    </div>
    <div class="col-md-1">
        <div class="form-group">
            <label class="removeperson2">Remove person</label>
        </div>
    </div>
    <div class="col-md-3">
        <div class="form-group">
            <%-- server control --%>
        </div>
    </div>
    <div class="col-md-2">
        <div class="form-group">
            <%-- server control --%>
        </div>
    </div>
    <div class="col-md-3">
        <div class="form-group">
            <%-- server control --%>
        </div>
    </div>
    <div class="col-md-2">
        <div class="form-group">
            <%-- server control --%>
        </div>
    </div>
</div>
<div class="row person3" style="display: none">
    <div class="col-md-1">
        <div class="form-group">
            <label>6</label>
        </div>
    </div>
    <div class="col-md-1">
        <div class="form-group">
            <label class="removeperson3">Remove person</label>
        </div>
    </div>
    <div class="col-md-3">
        <div class="form-group">
            <%-- server control --%>
        </div>
    </div>
    <div class="col-md-2">
        <div class="form-group">
            <%-- server control --%>
        </div>
    </div>
    <div class="col-md-3">
        <div class="form-group">
            <%-- server control --%>
        </div>
    </div>
    <div class="col-md-2">
        <div class="form-group">
            <%-- server control --%>
        </div>
    </div>
</div>
<div class="row person4" style="display: none">
    <div class="col-md-1">
        <div class="form-group">
            <label>6</label>
        </div>
    </div>
    <div class="col-md-1">
        <div class="form-group">
            <label class="removeperson4">Remove person</label>
        </div>
    </div>
    <div class="col-md-3">
        <div class="form-group">
            <%-- server control --%>
        </div>
    </div>
    <div class="col-md-2">
        <div class="form-group">
            <%-- server control --%>
        </div>
    </div>
    <div class="col-md-3">
        <div class="form-group">
            <%-- server control --%>
        </div>
    </div>
    <div class="col-md-2">
        <div class="form-group">
            <%-- server control --%>
        </div>
    </div>
</div>
<div class="row btnAddMorePerson">
    <div class="col-md-12">
        <div class="form-group">
            <%-- button --%>
        </div>
    </div>
</div>
<div class="row btnForm">
    <div class="col-md-12">
        <div class="form-group">
            <%-- button --%>
        </div>
    </div>
</div>

带有班级名称[rootPerson]的Div将永远留在。单击[addMoreBtn]将显示以下div，类名以[person *]开头。通过单击div，类名以[removePerson *]开头，可以再次隐藏此div。

我想显示/隐藏以[person *]开头的classname的div，可以比我在这里定义的更多。

如果person2可见，则在addMore按钮单击时将显示以下div person3。如果删除了person2，则addMore将显示person2。

Answer 1

我刚刚在我自己的项目中使用javascript中的类似功能。您可以通过按下按钮来添加HTML到页面。

我让你成了小提琴：http://jsfiddle.net/vjGdw/

我还添加了一个删除按钮，该按钮映射到javascript函数RemovePerson()。

如果您对我在项目中如何实现这一点感兴趣，请在此处找到： http://carbocount.wikidot.com/project:products:visualization

随意询问您是否有更多问题

JQuery Show按钮点击时从div集合隐藏div

1 个答案: