我正在尝试创建一个允许用户输入他们的经验和学历的表格

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

我能够做到这一点。唯一的问题是我正在创建的新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显示在先前的教育框下方,并且与教育相同?

任何帮助,将不胜感激。谢谢!

最佳答案

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

重复的div出现在表格末尾的原因是,您的教育和经验div都具有class="clonedInput",因此$('.clonedInput:last').after(c)导致重复的div放置在“体验”部分之后(碰巧是最后一个div与.clonedInput选择器匹配)。

一种解决方案是为这些div集合中的每一个赋予它们自己的唯一类名,例如分别为eduInputexpInput
因此,更正后的代码将是:

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


用于教育部门

为了清理代码,我建议将两个“添加”按钮绑定到同一个处理程序,但是通过检查目标参数并确定要复制的集(“教育”或“体验”)来对它们进行不同的操作。如:

    // single handler and click event for both buttons

    var clickHandler = function (e) {
        // determine which btnAdd was clicked, such as e.getAttribute('id')
    }

    $('.btnAdd').click(clickHandler);


但是严重的是,您应该稍微清理一下代码。

关于javascript - 使用JQuery动态添加和删除div?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/29198719/

10-12 12:56
查看更多