Question

我试图用2个添加按钮创建一个短发中继器。添加A或添加B。当我点击添加a时，将重复A表单，当我单击添加B时，将重复B表单

这是图片

这是我拥有的html

<div id="m_repeater">
                                        <div id="m_repeater_1">
                                            <div class="form-group  m-form__group row" id="m_repeater_1">
                                                <label class="col-lg-2 col-form-label">Contacts:</label>
                                                <div data-repeater-list="group-a" class="col-lg-10">
                                                    <div data-repeater-item class="form-group m-form__group row align-items-center">
                                                        <div class="col-md-3">
                                                            <div class="m-form__group m-form__group--inline">
                                                                <div class="m-form__label">
                                                                    <label>AName:</label>
                                                                </div>
                                                                <div class="m-form__control">
                                                                    <input type="email" class="form-control m-input">
                                                                </div>
                                                            </div>
                                                            <div class="d-md-none m--margin-bottom-10"></div>
                                                        </div>
                                                        <div class="col-md-3">
                                                            <div class="m-form__group m-form__group--inline">
                                                                <div class="m-form__label">
                                                                    <label class="m-label m-label--single">ANumber:</label>
                                                                </div>
                                                                <div class="m-form__control">
                                                                    <input type="email" class="form-control m-input">
                                                                </div>
                                                            </div>
                                                            <div class="d-md-none m--margin-bottom-10"></div>
                                                        </div>
                                                        <div class="col-md-2">
                                                            <div class="m-form__group m-form__group--inline">
                                                                <div class="m-form__label">
                                                                    <label class="m-label m-label--single">Order:</label>
                                                                </div>
                                                                <div class="m-form__control">
                                                                    <input type="email" class="form-control m-input">
                                                                </div>
                                                            </div>
                                                            <div class="d-md-none m--margin-bottom-10"></div>
                                                        </div>

                                                        <div class="col-md-4">
                                                            <div data-repeater-delete="" class="btn-sm btn btn-danger m-btn m-btn--icon m-btn--pill">
                                                                <span>
                                                                    <i class="la la-trash-o"></i>
                                                                    <span>Delete</span>
                                                                </span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                        <div id="m_repeater_11">
                                            <div class="form-group  m-form__group row" id="m_repeater_11">
                                                <label class="col-lg-2 col-form-label"></label>
                                                <div data-repeater-list="group-b" class="col-lg-10">
                                                    <div data-repeater-item class="form-group m-form__group row align-items-center">
                                                        <div class="col-md-3">
                                                            <div class="m-form__group m-form__group--inline">
                                                                <div class="m-form__label">
                                                                    <label>BName:</label>
                                                                </div>
                                                                <div class="m-form__control">
                                                                    <input type="email" class="form-control m-input">
                                                                </div>
                                                            </div>
                                                            <div class="d-md-none m--margin-bottom-10"></div>
                                                        </div>
                                                        <div class="col-md-3">
                                                            <div class="m-radio-inline">
                                                                <label class="m-checkbox m-checkbox--state-success">
                                                                    <input type="checkbox">Necessary
                                                                    <span></span>
                                                                </label>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-2">
                                                            <div class="m-form__group m-form__group--inline">
                                                                <div class="m-form__label">
                                                                    <label class="m-label m-label--single">Order:</label>
                                                                </div>
                                                                <div class="m-form__control">
                                                                    <input type="email" class="form-control m-input">
                                                                </div>
                                                            </div>
                                                            <div class="d-md-none m--margin-bottom-10"></div>
                                                        </div>

                                                        <div class="col-md-4">
                                                            <div data-repeater-delete="TFBO" class="btn-sm btn btn-danger m-btn m-btn--icon m-btn--pill">
                                                                <span>
                                                                    <i class="la la-trash-o"></i>
                                                                    <span>Delete</span>
                                                                </span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>

                                        </div>
                                        <div class="m-form__group form-group row">
                                            <label class="col-lg-2 col-form-label"></label>
                                            <div class="col-lg-4">
                                                <div data-repeater-create="tour" class="btn btn btn-sm btn-brand m-btn m-btn--icon m-btn--pill m-btn--wide">
                                                    <span>
                                                        <i class="la la-plus"></i>
                                                        <span>Add A</span>
                                                    </span>
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div data-repeater-create="TFBO" class="btn btn btn-sm btn-brand m-btn m-btn--icon m-btn--pill m-btn--wide">
                                                    <span>
                                                        <i class="la la-plus"></i>
                                                        <span>Add B</span>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

这是js

    var FormRepeater = {
    init: function() {
        $("#m_repeater").repeater({
            initEmpty: !1,
            defaultValues: {
                "text-input": "foo"
            },
            show: function() {
                $(this).slideDown()
            },
            hide: function(e) {
                $(this).slideUp(e)
            }
        }),
        $("#m_repeater_1").repeater({
            initEmpty: !1,
            defaultValues: {
                "text-input": "foo"
            },
            show: function() {
                $(this).slideDown()
            },
            hide: function(e) {
                $(this).slideUp(e)
            }
        }),
        $("#m_repeater_11").repeater({
            initEmpty: !1,
            defaultValues: {
                "text-input": "foo"
            },
            show: function() {
                $(this).slideDown()
            },
            hide: function(e) {
                $(this).slideUp(e)
            }
        })
    }
};
jQuery(document).ready(function() {
    FormRepeater.init()
});

我知道可以用两个不同形式的中继器来完成。最好情况是更好地控制我们保存的东西。

我尝试了一些版本，但是我的js信息不太好，因为我在html部分做错了。我无法尝试其他设计。

我也检查了ne是否存在类似问题。我发现的唯一一件事是在同一页面中使用两个不同的表单填写程序。所以我不是我的解决方案。

我需要证明我是从metronic管理模板获得的设计。

这里是链接 Metrnic form repeater

一个表单中继器下有两个不同的行

0 个答案: