Question

我正在尝试创建一个允许用户输入他们的经验和教育的表单

我希望用户能够添加和删除教育或体验。

我能做到这一点......有点儿。只有问题是我创建的新div将被附加到页面的末尾而不是在前一个div之后附加。

这些是我的脚本：

    $(document).ready(function() {
        var inputs = 1;

        $('#btnAdd').click(function() {
            $('.btnDel:disabled').removeAttr('disabled');
            var c = $('.clonedInput:first').clone(true);
            c.children(':text').attr('name', 'input' + (++inputs));
            $('.clonedInput:last').after(c);
        });

        $('.btnDel').click(function() {
            if (confirm('continue delete?')) {
                --inputs;
                $(this).closest('.clonedInput').remove();
                $('.btnDel').attr('disabled', ($('.clonedInput').length < 2));
            }
        });
    });
    $(document).ready(function() {

        var inputs = 1;

        $('#btnAdd2').click(function() {
            $('.btnDel2:disabled').removeAttr('disabled');
            var c = $('.clonedInput:first').clone(true);
            c.children(':text').attr('name', 'input' + (++inputs));
            $('.clonedInput:last').after(c);
        });

        $('.btnDel2').click(function() {
                --inputs;
                $(this).closest('.clonedInput').remove();
                $('.btnDel2').attr('disabled', ($('.clonedInput').length < 2));
        });
    });

我理解复制这样的代码是不好的形式，但是我不知道还有别的方法可以做到这一点，所以单击添加按钮不会被错误的div按下...

我的html是：

<form id="myForm">
        <h2>Education</h2>
        <p>Please add all of your education</p>
        <div style="margin-bottom: 4px; border: 2px solid; border-style: dashed" class="clonedInput">

            Level: <select>
                <option value="secondary">Secondary</option>
                <option value="someps">Some Post Secondary</option>
                <option value="college">College</option>
            </select> <br /> <br />
    Did you receive a degree, diploma or certificate?<br />
        <select>
            <option value="certificate">Certificate</option>
            <option>Diploma</option>
            <option value="degree">Degree</option>
        </select> <br />
        <input type="button" class="btnDel" value="Remove Education" disabled="disabled" />
    </div>
    <div>
        <input type="button" id="btnAdd2" value="add Education" />
    </div>

    <h2>Experience</h2>
    <p>Please add all of your experience</p>
    <div style="margin-bottom: 4px; class="clonedInput">

        Position title: <input type="text"><br /> Years at position:
        <input type="number"><br />
        Responsibilities: <input type="text"><br /> 
        <input type="text"><br /> 
        Type: <select>
            <option>Accounting, banking and Finance</option>
            <option>Publishing & Journalism</option>
            <option>Social Care & guidance work</option>
        </select>
        <input type="button" class="btnDel2" value="Remove Experience"
            disabled="disabled" />
    </div>

    <div>
        <input type="button" id="btnAdd2" value="add Experience" />
    </div>
</form>

关于我如何修复我的脚本的任何想法，以便当我点击教育的添加按钮时，包含所有“教育”字段的新div显示在上一个教育框下方，并且相同用于教育？

任何帮助将不胜感激。谢谢！

Answer 1

首先，为什么你有2x $(document).ready？将您的代码合并为一个。

您的重复div出现在表单末尾的原因是因为您的Education和Experience div都有class="clonedInput"，因此$('.clonedInput:last').after(c)会导致重复的div放在之后体验部分（恰好是与<{1}}选择器匹配的 last div）。

解决方案是为每个div组提供各自独特的类名，例如分别为.clonedInput和eduInput。因此，更正后的代码为：

expInput

为教育部门。

要清理代码，我建议将“添加”按钮绑定到同一个处理程序，但通过检查目标参数并确定要复制哪个集（教育或体验）来对其进行不同的处理。如：

    $('#btnAdd').click(function() {
        $('.btnDel:disabled').removeAttr('disabled');
        var c = $('.eduInput:first').clone(true);
        c.children(':text').attr('name', 'input' + (++inputs));
        $('.eduInput:last').after(c);
    });

但是你应该认真地清理你的代码。

使用JQuery动态添加和删除div？

1 个答案: