JQuery Show Hide div from div collection on button click答案

【问题标题】：JQuery Show Hide div from div collection on button clickJQuery Show Hide div from div collection on button click
【发布时间】：2013-12-19 06:44:40
【问题描述】：

我正在构建一个 UI，使用户能够输入他们的信息，即名字、姓氏、联系电话。一次只能输入 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] 将显示类名以 [person*] 开头的 div。单击类名以 [removePerson*] 开头的 div 可以再次隐藏此 div。

我想显示/隐藏类名以 [person*] 开头的 div，可以比我在此处定义的更多。

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

【问题讨论】：

你试过什么？有什么问题？请发布一些 jQuery 代码...另外，如果您将所有这些 div 设置为表格...为什么不使用 html 表格元素？
@A.Wolff 我是 jquery 初学者，所以我没有逻辑。如果我能在这里找到它，逻辑就会起作用。谢谢。
@LaveLoos div 而不是 html 只是因为这是一种实践，因为我也在使用 twitter 引导程序。

标签： jquery show-hide

【解决方案1】：

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

我给你做了个小提琴：http://jsfiddle.net/vjGdw/

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

如果您对我在项目中的具体实现方式感兴趣，您可以在这里找到： http://carbocount.wikidot.com/project:products:visualization

如果您还有其他问题，请随时提问

【讨论】：

我试过你的脚本动态添加填充的 html。但得到解析器错误。我认为解决方案不对。我想我应该像您提供的那样通过脚本构建接口，但也动态提供 html，而不是预先定义，因为最后我需要我认为的值，我将通过 jquery ajax 调用或 REST API 来获得它。谢谢
您使用的是什么浏览器？在 chrome 中对我来说很好用
您的脚本运行良好，我检查了小提琴。当我将我的 html 放入 Visual Studio 时，我遇到了解析器错误。